ontimize-web-ngx 15.0.4 → 15.1.1

package/fesm2020/ontimize-web-ngx.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Host, Self, Optional, Input, HostListener, Output, Injectable, Injector, Component, forwardRef, ContentChildren, ChangeDetectorRef, Pipe, NgModule, ViewChild, ElementRef, ViewEncapsulation, ViewContainerRef, Inject, NgZone, HostBinding, ViewChildren, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, SkipSelf, isDevMode, inject, ContentChild, Renderer2, APP_INITIALIZER } from '@angular/core';
+import { InjectionToken, EventEmitter, Directive, Host, Self, Optional, Input, HostListener, Output, Injectable, Injector, Component, forwardRef, 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';
 export { Observable, Subject } from 'rxjs';
@@ -23,7 +23,7 @@ import { __decorate, __metadata } from 'tslib';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { map, share, filter, debounceTime, distinctUntilChanged, takeUntil, take, catchError } from 'rxjs/operators';
+import { map, share, filter, catchError, debounceTime, distinctUntilChanged, takeUntil, take } from 'rxjs/operators';
 import { MatSnackBar, MatSnackBarRef, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i2 from '@angular/flex-layout/flex';
 import * as i4 from '@angular/material/button';
@@ -91,6 +91,7 @@ import * as i6 from '@angular/material/tabs';
 import { MatTabsModule, MatTabGroup, MatTab } from '@angular/material/tabs';
 import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
 import * as i4$2 from '@angular/flex-layout/extended';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i7$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i4$3 from 'angular-resizable-element';
@@ -108,7 +109,6 @@ import * as i5$4 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import * as i3$5 from '@angular/cdk/a11y';
 import { FlatTreeControl, CdkTreeModule } from '@angular/cdk/tree';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i10$2 from '@angular/material/tree';
 import { MatTreeModule } from '@angular/material/tree';
 
@@ -205,6 +205,12 @@ class Codes {
         }
         return !((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105));
     }
+    static isValidEditionMode(editionMode) {
+        return Codes.AVAILABLE_MODES.indexOf(editionMode) !== -1;
+    }
+    static isValidDetailMode(detailMode) {
+        return Codes.AVAILABLE_DETAIL_MODES.indexOf(detailMode) !== -1;
+    }
 }
 Codes.PAGINATED_QUERY_METHOD = 'advancedQuery';
 Codes.DELETE_METHOD = 'delete';
@@ -220,9 +226,11 @@ Codes.AVAILABLE_ROW_HEIGHTS_VALUES = ['small', 'medium', 'large'];
 Codes.DETAIL_MODE_NONE = 'none';
 Codes.DETAIL_MODE_CLICK = 'click';
 Codes.DETAIL_MODE_DBLCLICK_VALUES = ['dblclick', 'doubleclick'];
+Codes.AVAILABLE_DETAIL_MODES = [Codes.DETAIL_MODE_NONE, Codes.DETAIL_MODE_CLICK, ...Codes.DETAIL_MODE_DBLCLICK_VALUES];
 Codes.EDITION_MODE_NONE = 'none';
 Codes.EDITION_MODE_CLICK = 'click';
 Codes.EDITION_MODE_DBLCLICK_VALUES = ['dblclick', 'doubleclick'];
+Codes.AVAILABLE_MODES = [Codes.EDITION_MODE_NONE, Codes.EDITION_MODE_CLICK, ...Codes.EDITION_MODE_DBLCLICK_VALUES];
 Codes.SELECTION_MODE_NONE = 'none';
 Codes.SELECTION_MODE_SINGLE = 'single';
 Codes.SELECTION_MODE_MULTIPLE = 'multiple';
@@ -708,6 +716,21 @@ class Util {
         cache = null;
         return str;
     }
+    static sortFunction(propertyA, propertyB, activeSortDirection) {
+        let valueA = '';
+        let valueB = '';
+        if (Util.isDefined(propertyA)) {
+            valueA = isNaN(+propertyA) ? propertyA.toString().trim().toLowerCase() : +propertyA;
+        }
+        if (Util.isDefined(propertyB)) {
+            valueB = isNaN(+propertyB) ? propertyB.toString().trim().toLowerCase() : +propertyB;
+        }
+        return (valueA <= valueB ? -1 : 1) * (activeSortDirection === 'asc' ? 1 : -1);
+    }
+    static cloneArray(arr) {
+        const clonedArray = arr.map((x) => Object.assign({}, x));
+        return clonedArray;
+    }
 }
 Util.columnAggregates = ['sum', 'count', 'avg', 'min', 'max'];
 
@@ -2639,6 +2662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class PermissionsService {
     constructor(injector) {
         this.injector = injector;
+        this.onChangePermissions = new Subject();
         const appConfig = this.injector.get(AppConfig).getConfiguration();
         if (Util.isDefined(appConfig.permissionsConfiguration)) {
             this.ontimizePermissionsConfig = appConfig.permissionsConfiguration;
@@ -2663,6 +2687,7 @@ class PermissionsService {
     }
     restart() {
         this.permissions = undefined;
+        this.onChangePermissions.next(this.permissions);
     }
     hasPermissions() {
         return this.permissions !== undefined;
@@ -2696,6 +2721,7 @@ class PermissionsService {
         const dataObservable = new Observable(innerObserver => {
             self.permissionsService.loadPermissions().subscribe((res) => {
                 self.permissions = res;
+                self.onChangePermissions.next(self.permissions);
                 innerObserver.next(res);
             }, (err) => {
                 console.error('[Permissions.queryPermissions]: error', err);
@@ -2707,6 +2733,9 @@ class PermissionsService {
         return dataObservable.pipe(share());
     }
     getPermissionIdFromActRoute(actRoute) {
+        if (!Util.isDefined(actRoute)) {
+            return undefined;
+        }
         let result;
         let snapshot = actRoute.snapshot;
         result = ((snapshot.data || {})['oPermission'] || {})['permissionId'];
@@ -2741,10 +2770,11 @@ class PermissionsService {
         if (attrPermissions && attrPermissions.selector === selector) {
             compPermissions = attrPermissions;
         }
-        return {
+        const permissions = {
             route: routePermissions,
             component: compPermissions
         };
+        return permissions;
     }
     getTablePermissions(attr, actRoute) {
         if (!Util.isDefined(this.permissions)) {
@@ -2766,24 +2796,36 @@ class PermissionsService {
         };
         return permissions;
     }
-    getFormPermissions(attr, actRoute) {
+    getServiceBasePermissions(attr, actRoute, selector) {
         if (!Util.isDefined(this.permissions)) {
             return undefined;
         }
-        const perm = this.getOComponentPermissions(attr, actRoute, 'o-form');
+        const perm = this.getOComponentPermissions(attr, actRoute, selector);
         const routePerm = perm.route;
         const compPerm = perm.component;
         if (!Util.isDefined(routePerm) || !Util.isDefined(compPerm)) {
             return compPerm || routePerm;
         }
         const permissions = {
-            selector: 'o-form',
+            selector: selector,
             attr: routePerm.attr,
             components: this.mergeOPermissionsArrays(compPerm.components, routePerm.components),
             actions: this.mergeOPermissionsArrays(compPerm.actions, routePerm.actions)
         };
         return permissions;
     }
+    getFormPermissions(attr, actRoute) {
+        return this.getServiceBasePermissions(attr, actRoute, 'o-form');
+    }
+    getListPermissions(attr, actRoute) {
+        return this.getServiceBasePermissions(attr, actRoute, 'o-list');
+    }
+    getGridPermissions(attr, actRoute) {
+        return this.getServiceBasePermissions(attr, actRoute, 'o-grid');
+    }
+    getTreePermissions(attr, actRoute) {
+        return this.getServiceBasePermissions(attr, actRoute, 'o-tree');
+    }
     getMenuPermissions(attr) {
         let permissions;
         if (!Util.isDefined(this.permissions)) {
@@ -2793,6 +2835,21 @@ class PermissionsService {
         permissions = allMenu.find(comp => comp.attr === attr);
         return permissions;
     }
+    getAllMenuPermissions() {
+        if (!Util.isDefined(this.permissions)) {
+            return undefined;
+        }
+        const permissions = this.permissions.menu || [];
+        return permissions;
+    }
+    getOButtonPermissions(attr, actRoute) {
+        let permissions;
+        if (!Util.isDefined(this.permissions)) {
+            return undefined;
+        }
+        permissions = this.getOComponentPermissions(attr, actRoute, 'o-button');
+        return permissions.component;
+    }
     mergeOPermissionsArrays(permissionsA, permissionsB) {
         if (!Util.isDefined(permissionsA) || !Util.isDefined(permissionsB)) {
             return permissionsA || permissionsB;
@@ -3265,12 +3322,14 @@ class OntimizeAuthService extends AuthService {
     onLogoutSuccess(sessionId) {
         if (sessionId === 0) {
             this.clearSessionData();
+            this.restartPermission();
             this.redirectLogin(false);
         }
     }
     onLogoutError(error) {
         console.error('Error on logout');
         this.clearSessionData();
+        this.restartPermission();
         this.redirectLogin(false);
     }
     clearSessionData() {
@@ -3292,6 +3351,10 @@ class OntimizeAuthService extends AuthService {
         extras[Codes.QUERY_PARAMS] = arg;
         this.router.navigate([Codes.LOGIN_ROUTE], extras);
     }
+    restartPermission() {
+        const permissionsService = this.injector.get(PermissionsService);
+        permissionsService.restart();
+    }
 }
 OntimizeAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OntimizeAuthService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 OntimizeAuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OntimizeAuthService });
@@ -6476,12 +6539,6 @@ class OFormCacheClass {
     }
 }
 
-class OFormBase {
-    constructor() {
-        this._pKeysEquiv = {};
-    }
-}
-
 class OFormConfirmExitService {
     constructor(dialogService) {
         this.dialogService = dialogService;
@@ -7097,6 +7154,14 @@ class OFormNavigationClass {
     }
 }
 
+class OFormBase {
+    constructor() {
+        this._pKeysEquiv = {};
+    }
+}
+
+const O_FORM_GLOBAL_CONFIG = new InjectionToken('o-form-config');
+
 class OFormMessageService {
     getQueryErrorMessage() {
         return 'MESSAGES.ERROR_QUERY';
@@ -7804,6 +7869,7 @@ const DEFAULT_INPUTS_O_FORM = [
     'queryFallbackFunction: query-fallback-function',
     'ignoreDefaultNavigation: ignore-default-navigation',
     'messageServiceType : message-service-type',
+    'setValueOrder: set-value-order'
 ];
 const DEFAULT_OUTPUTS_O_FORM = [
     'onDataLoaded',
@@ -7860,6 +7926,7 @@ class OFormComponent {
         this.showHeaderActionsText = 'yes';
         this.keys = '';
         this.columns = '';
+        this.setValueOrder = '';
         this.stayInRecordAfterEdit = false;
         this.afterInsertMode = 'close';
         this.queryOnInit = true;
@@ -7937,6 +8004,18 @@ class OFormComponent {
         }
         catch (e) {
         }
+        this.getGlobalConfig();
+    }
+    getGlobalConfig() {
+        try {
+            const oFormGlobalConfig = this.injector.get(O_FORM_GLOBAL_CONFIG);
+            if (Util.isDefined(oFormGlobalConfig.headerActions)) {
+                this.headeractions = oFormGlobalConfig.headerActions;
+            }
+            ;
+        }
+        catch (error) {
+        }
     }
     registerFormComponent(comp) {
         if (comp) {
@@ -8206,6 +8285,7 @@ class OFormComponent {
         const pkArray = Util.parseArray(this.parentKeys);
         this._pKeysEquiv = Util.parseParentKeysEquivalences(pkArray);
         this.keysSqlTypesArray = Util.parseArray(this.keysSqlTypes);
+        this.setValueOrderArray = Util.parseArray(this.setValueOrder);
         this.configureService();
         this.formNavigation.subscribeToQueryParams();
         this.formNavigation.subscribeToUrlParams();
@@ -8929,24 +9009,35 @@ class OFormComponent {
         this.zone.run(() => {
             this.formData = newFormData;
             const components = this.getComponents();
-            if (components) {
-                Object.keys(components).forEach(key => {
+            const keyComponents = [...Object.keys(components)];
+            if (!Util.isArrayEmpty(this.setValueOrderArray)) {
+                keyComponents.sort((a, b) => {
+                    const indexA = this.setValueOrderArray.indexOf(a) === -1 ? 1 : 0;
+                    const indexB = this.setValueOrderArray.indexOf(b) === -1 ? 1 : 0;
+                    return indexA - indexB;
+                });
+            }
+            if (!Util.isArrayEmpty(keyComponents)) {
+                keyComponents.forEach(key => {
                     const comp = components[key];
-                    if (Util.isFormDataComponent(comp)) {
-                        try {
-                            if (comp.isAutomaticBinding()) {
-                                comp.data = self.getDataValue(key);
-                            }
-                        }
-                        catch (error) {
-                            console.error(error);
-                        }
-                    }
+                    this.setDataInFormDataComponent(comp, key);
                 });
                 self.initializeFields();
             }
         });
     }
+    setDataInFormDataComponent(comp, attr) {
+        if (Util.isFormDataComponent(comp)) {
+            try {
+                if (comp.isAutomaticBinding()) {
+                    comp.data = this.getDataValue(attr);
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+    }
     initializeFields() {
         Object.keys(this.formGroup.controls).forEach(control => {
             this.formGroup.controls[control].markAsPristine();
@@ -9046,7 +9137,7 @@ class OFormComponent {
 OFormComponent.DEFAULT_LAYOUT_DIRECTION = 'column';
 OFormComponent.guardClassName = 'CanDeactivateFormGuard';
 OFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OFormComponent, selector: "o-form", inputs: { showHeader: ["show-header", "showHeader"], headerMode: ["header-mode", "headerMode"], headerPosition: ["header-position", "headerPosition"], labelheader: ["label-header", "labelheader"], labelHeaderAlign: ["label-header-align", "labelHeaderAlign"], headeractions: ["header-actions", "headeractions"], showHeaderActionsText: ["show-header-actions-text", "showHeaderActionsText"], entity: "entity", keys: "keys", columns: "columns", service: "service", stayInRecordAfterEdit: ["stay-in-record-after-edit", "stayInRecordAfterEdit"], afterInsertMode: ["after-insert-mode", "afterInsertMode"], serviceType: ["service-type", "serviceType"], queryOnInit: ["query-on-init", "queryOnInit"], parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertMethod: ["insert-method", "insertMethod"], updateMethod: ["update-method", "updateMethod"], deleteMethod: ["delete-method", "deleteMethod"], layoutDirection: ["layout-direction", "layoutDirection"], layoutAlign: ["layout-align", "layoutAlign"], editableDetail: ["editable-detail", "editableDetail"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"], undoButton: ["undo-button", "undoButton"], showHeaderNavigation: ["show-header-navigation", "showHeaderNavigation"], oattr: ["attr", "oattr"], includeBreadcrumb: ["include-breadcrumb", "includeBreadcrumb"], detectChangesOnBlur: ["detect-changes-on-blur", "detectChangesOnBlur"], confirmExit: ["confirm-exit", "confirmExit"], ignoreOnExit: ["ignore-on-exit", "ignoreOnExit"], queryFallbackFunction: ["query-fallback-function", "queryFallbackFunction"], ignoreDefaultNavigation: ["ignore-default-navigation", "ignoreDefaultNavigation"], messageServiceType: ["message-service-type", "messageServiceType"] }, outputs: { onDataLoaded: "onDataLoaded", beforeCloseDetail: "beforeCloseDetail", beforeGoEditMode: "beforeGoEditMode", onFormModeChange: "onFormModeChange", onBeforeInsert: "onBeforeInsert", onBeforeUpdate: "onBeforeUpdate", onBeforeDelete: "onBeforeDelete", onInsert: "onInsert", onUpdate: "onUpdate", onDelete: "onDelete", beforeInsertMode: "beforeInsertMode", beforeUpdateMode: "beforeUpdateMode", beforeInitialMode: "beforeInitialMode", onInsertMode: "onInsertMode", onUpdateMode: "onUpdateMode", onInitialMode: "onInitialMode", onCancel: "onCancel" }, host: { properties: { "class.o-form": "true" } }, providers: [
+OFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OFormComponent, selector: "o-form", inputs: { showHeader: ["show-header", "showHeader"], headerMode: ["header-mode", "headerMode"], headerPosition: ["header-position", "headerPosition"], labelheader: ["label-header", "labelheader"], labelHeaderAlign: ["label-header-align", "labelHeaderAlign"], headeractions: ["header-actions", "headeractions"], showHeaderActionsText: ["show-header-actions-text", "showHeaderActionsText"], entity: "entity", keys: "keys", columns: "columns", service: "service", stayInRecordAfterEdit: ["stay-in-record-after-edit", "stayInRecordAfterEdit"], afterInsertMode: ["after-insert-mode", "afterInsertMode"], serviceType: ["service-type", "serviceType"], queryOnInit: ["query-on-init", "queryOnInit"], parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertMethod: ["insert-method", "insertMethod"], updateMethod: ["update-method", "updateMethod"], deleteMethod: ["delete-method", "deleteMethod"], layoutDirection: ["layout-direction", "layoutDirection"], layoutAlign: ["layout-align", "layoutAlign"], editableDetail: ["editable-detail", "editableDetail"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"], undoButton: ["undo-button", "undoButton"], showHeaderNavigation: ["show-header-navigation", "showHeaderNavigation"], oattr: ["attr", "oattr"], includeBreadcrumb: ["include-breadcrumb", "includeBreadcrumb"], detectChangesOnBlur: ["detect-changes-on-blur", "detectChangesOnBlur"], confirmExit: ["confirm-exit", "confirmExit"], ignoreOnExit: ["ignore-on-exit", "ignoreOnExit"], queryFallbackFunction: ["query-fallback-function", "queryFallbackFunction"], ignoreDefaultNavigation: ["ignore-default-navigation", "ignoreDefaultNavigation"], messageServiceType: ["message-service-type", "messageServiceType"], setValueOrder: ["set-value-order", "setValueOrder"] }, outputs: { onDataLoaded: "onDataLoaded", beforeCloseDetail: "beforeCloseDetail", beforeGoEditMode: "beforeGoEditMode", onFormModeChange: "onFormModeChange", onBeforeInsert: "onBeforeInsert", onBeforeUpdate: "onBeforeUpdate", onBeforeDelete: "onBeforeDelete", onInsert: "onInsert", onUpdate: "onUpdate", onDelete: "onDelete", beforeInsertMode: "beforeInsertMode", beforeUpdateMode: "beforeUpdateMode", beforeInitialMode: "beforeInitialMode", onInsertMode: "onInsertMode", onUpdateMode: "onUpdateMode", onInitialMode: "onInitialMode", onCancel: "onCancel" }, host: { properties: { "class.o-form": "true" } }, providers: [
         { provide: OFormBase, useExisting: forwardRef(() => OFormComponent) },
         OntimizeServiceProvider,
         OFormMessageService
@@ -11680,20 +11771,50 @@ class AppMenuService {
     constructor(injector) {
         this.injector = injector;
         this.onClick = new Subject;
+        this.onPermissionMenuChanged = new Subject();
         this._config = this.injector.get(AppConfig);
-        this.MENU_ROOTS = this._config.getMenuConfiguration();
         this.router = this.injector.get(Router);
         this.router.events.subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 this.setActiveItem();
             }
         });
+        this.setMenuItemsByMenuConfiguration();
+        this.permissionsService = this.injector.get(PermissionsService);
+        this.permissionsService.onChangePermissions.subscribe(x => {
+            this.mergeMenuItemsWithPermissions();
+            this.onPermissionMenuChanged.next();
+        });
+    }
+    setMenuItemsByMenuConfiguration() {
+        const defaultMenuConfiguration = Util.cloneArray(this._config.getMenuConfiguration());
+        this.MENU_ROOTS = defaultMenuConfiguration;
         this.ALL_MENU_ITEMS = [];
         for (let i = 0, len = this.MENU_ROOTS.length; i < len; i++) {
             const item = this.MENU_ROOTS[i];
             this.ALL_MENU_ITEMS = this.ALL_MENU_ITEMS.concat(this.getMenuItems(item));
         }
     }
+    mergeMenuItemsWithPermissions() {
+        this.setMenuItemsByMenuConfiguration();
+        const permissionsMenu = this.permissionsService.getAllMenuPermissions();
+        if (Util.isDefined(permissionsMenu)) {
+            this.MENU_ROOTS = [...this.MENU_ROOTS.map(menu => {
+                    const indexPermission = permissionsMenu.findIndex(permission => permission.attr === menu.id);
+                    if (indexPermission > -1) {
+                        menu.visible = permissionsMenu[indexPermission].visible;
+                    }
+                    return menu;
+                })];
+            this.ALL_MENU_ITEMS = [...this.ALL_MENU_ITEMS.map(menu => {
+                    const indexPermission = permissionsMenu.findIndex(permission => permission.attr === menu.id);
+                    if (indexPermission > -1) {
+                        menu.visible = permissionsMenu[indexPermission].visible;
+                    }
+                    return menu;
+                })];
+        }
+    }
     getMenuRoots() {
         return this.MENU_ROOTS;
     }
@@ -11742,6 +11863,9 @@ class AppMenuService {
     isRouteItem(item) {
         return Util.isDefined(item.route);
     }
+    isVisible(item) {
+        return !Util.isDefined(item.visible) || (Util.isDefined(item.visible) && item.visible);
+    }
     getMenuItems(item) {
         const menuGroup = item;
         const items = menuGroup.items;
@@ -11785,10 +11909,10 @@ class OBarMenuNestedComponent {
     }
 }
 OBarMenuNestedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OBarMenuNestedComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-OBarMenuNestedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OBarMenuNestedComponent, selector: "o-bar-menu-nested", inputs: { items: "items" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of items\">\n  <ng-container [ngSwitch]=\"appMenuService.getMenuItemType(item)\">\n\n    <o-bar-menu-group *ngSwitchCase=\"'group'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [ngClass]=\"item.class\">\n      <o-bar-menu-nested [items]=\"item.items\"> </o-bar-menu-nested>\n    </o-bar-menu-group>\n\n    <o-locale-bar-menu-item *ngSwitchCase=\"'locale'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\"\n      [locale]=\"item.locale\" [ngClass]=\"item.class\">\n    </o-locale-bar-menu-item>\n\n    <o-bar-menu-item *ngSwitchDefault [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [route]=\"item.route\"\n      [ngClass]=\"item.class\"></o-bar-menu-item>\n\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: OBarMenuItemComponent, selector: "o-bar-menu-item", inputs: ["route", "action"] }, { kind: "component", type: OBarMenuGroupComponent, selector: "o-bar-menu-group" }, { kind: "component", type: OLocaleBarMenuItemComponent, selector: "o-locale-bar-menu-item", inputs: ["locale"] }, { kind: "component", type: OBarMenuNestedComponent, selector: "o-bar-menu-nested", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OBarMenuNestedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OBarMenuNestedComponent, selector: "o-bar-menu-nested", inputs: { items: "items" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of items\">\n  <ng-container [ngSwitch]=\"appMenuService.getMenuItemType(item)\" *ngIf=\"appMenuService.isVisible(item)\">\n\n    <o-bar-menu-group *ngSwitchCase=\"'group'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [ngClass]=\"item.class\">\n      <o-bar-menu-nested [items]=\"item.items\"> </o-bar-menu-nested>\n    </o-bar-menu-group>\n\n    <o-locale-bar-menu-item *ngSwitchCase=\"'locale'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\"\n      [locale]=\"item.locale\" [ngClass]=\"item.class\">\n    </o-locale-bar-menu-item>\n\n    <o-bar-menu-item *ngSwitchDefault [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [route]=\"item.route\"\n      [ngClass]=\"item.class\"></o-bar-menu-item>\n\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: OBarMenuItemComponent, selector: "o-bar-menu-item", inputs: ["route", "action"] }, { kind: "component", type: OBarMenuGroupComponent, selector: "o-bar-menu-group" }, { kind: "component", type: OLocaleBarMenuItemComponent, selector: "o-locale-bar-menu-item", inputs: ["locale"] }, { kind: "component", type: OBarMenuNestedComponent, selector: "o-bar-menu-nested", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OBarMenuNestedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'o-bar-menu-nested', inputs: DEFAULT_INPUTS_O_BAR_MENU_NESTED, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of items\">\n  <ng-container [ngSwitch]=\"appMenuService.getMenuItemType(item)\">\n\n    <o-bar-menu-group *ngSwitchCase=\"'group'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [ngClass]=\"item.class\">\n      <o-bar-menu-nested [items]=\"item.items\"> </o-bar-menu-nested>\n    </o-bar-menu-group>\n\n    <o-locale-bar-menu-item *ngSwitchCase=\"'locale'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\"\n      [locale]=\"item.locale\" [ngClass]=\"item.class\">\n    </o-locale-bar-menu-item>\n\n    <o-bar-menu-item *ngSwitchDefault [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [route]=\"item.route\"\n      [ngClass]=\"item.class\"></o-bar-menu-item>\n\n  </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'o-bar-menu-nested', inputs: DEFAULT_INPUTS_O_BAR_MENU_NESTED, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of items\">\n  <ng-container [ngSwitch]=\"appMenuService.getMenuItemType(item)\" *ngIf=\"appMenuService.isVisible(item)\">\n\n    <o-bar-menu-group *ngSwitchCase=\"'group'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [ngClass]=\"item.class\">\n      <o-bar-menu-nested [items]=\"item.items\"> </o-bar-menu-nested>\n    </o-bar-menu-group>\n\n    <o-locale-bar-menu-item *ngSwitchCase=\"'locale'\" [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\"\n      [locale]=\"item.locale\" [ngClass]=\"item.class\">\n    </o-locale-bar-menu-item>\n\n    <o-bar-menu-item *ngSwitchDefault [title]=\"item.name\" [attr]=\"item.id\" [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [route]=\"item.route\"\n      [ngClass]=\"item.class\"></o-bar-menu-item>\n\n  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class OBarMenuSeparatorComponent {
@@ -11810,10 +11934,12 @@ class OBarMenuComponent {
     constructor(elRef, injector) {
         this.elRef = elRef;
         this.injector = injector;
+        this.subscription = new Subscription();
         this.id = 'm_' + String((new Date()).getTime() + Util.randomNumber().toString());
         this.permissionsService = this.injector.get(PermissionsService);
         this.translateService = this.injector.get(OTranslateService);
         this.appMenuService = this.injector.get(AppMenuService);
+        this.subscription.add(this.appMenuService.onPermissionMenuChanged.subscribe(() => this.refreshMenuRoots()));
         this.menuRoots = this.appMenuService.getMenuRoots();
     }
     ngOnInit() {
@@ -11869,6 +11995,12 @@ class OBarMenuComponent {
     get menuItems() {
         return this.menuRoots;
     }
+    refreshMenuRoots() {
+        this.menuRoots = [...this.appMenuService.getMenuRoots()];
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
 }
 OBarMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OBarMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 OBarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OBarMenuComponent, selector: "o-bar-menu", inputs: { menuTitle: ["title", "menuTitle"], tooltip: "tooltip" }, host: { properties: { "class.o-bar-menu": "true" } }, providers: [{ provide: OBarMenuBase, useExisting: forwardRef(() => OBarMenuComponent) }], ngImport: i0, template: "<mat-toolbar color=\"primary\">\n  <nav>\n    <mat-icon class=\"mat-24 menu-icon toggle\" (click)=\"input.checked = !input.checked\" svgIcon=\"ontimize:menu\"></mat-icon>\n    <label [attr.for]=\"id\" class=\"toggle title-label\">{{ menuTitle | oTranslate }}</label>\n    <input #input [attr.id]=\"id\" type=\"checkbox\" />\n    <div class=\"fake-ul mat-primary menu\">\n      <ng-container>\n        <o-bar-menu-nested [items]=\"menuItems\"></o-bar-menu-nested>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n  </nav>\n</mat-toolbar>", styles: [".o-bar-menu .toggle,.o-bar-menu input{display:none}.o-bar-menu nav{margin:0;padding:0}.o-bar-menu nav:after{content:\"\";display:table;clear:both}.o-bar-menu nav .fake-li a{cursor:pointer}.o-bar-menu nav .fake-ul{float:right;padding:0;margin:0;list-style:none;position:relative}.o-bar-menu nav .fake-ul.menu>.o-bar-menu-item .o-bar-menu-item-title{top:0;padding-left:0}.o-bar-menu nav .fake-ul .fake-li{margin:0;display:inline-block}.o-bar-menu nav .fake-ul .fake-ul{display:none;position:absolute;top:60px}.o-bar-menu nav .fake-ul .fake-ul .fake-li{min-width:250px;width:250px;float:none;display:list-item;position:relative;white-space:nowrap}.o-bar-menu nav .fake-ul .fake-ul .fake-ul{top:0}.o-bar-menu nav .fake-ul .fake-ul .fake-ul .fake-li{position:relative;top:0;left:0}.o-bar-menu nav a{display:flex;align-items:center;padding:0 20px;font-size:20px;line-height:60px;text-decoration:none}.o-bar-menu .fake-li>a:only-child:after{content:\"\"}@media all and (min-width: 768px){.o-bar-menu nav .fake-ul .fake-li-hover>.fake-ul{display:inline-block;z-index:1000}.o-bar-menu nav .fake-ul .fake-ul .fake-li-hover>.fake-ul{display:inline-block;z-index:1000;left:250px}}@media all and (max-width: 767px){.o-bar-menu .mat-toolbar{height:auto!important}.o-bar-menu nav{margin:10px 0;width:100%}.o-bar-menu nav .o-bar-menu-group,.o-bar-menu nav .o-bar-menu-item,.o-bar-menu nav .o-bar-menu-separator,.o-bar-menu nav .o-locale-bar-menu-item{display:flex}.o-bar-menu nav .o-bar-menu-group .mat-mdc-list-item,.o-bar-menu nav .o-bar-menu-item .mat-mdc-list-item,.o-bar-menu nav .o-bar-menu-separator .mat-mdc-list-item,.o-bar-menu nav .o-locale-bar-menu-item .mat-mdc-list-item{display:flex;justify-content:flex-start;align-items:center}.o-bar-menu nav .fake-ul{width:100%}.o-bar-menu nav .fake-ul .fake-li{width:100%}.o-bar-menu nav .fake-ul .fake-ul{float:none;position:static;width:100%}.o-bar-menu nav .fake-ul .fake-ul .fake-li{padding-left:20px;width:100%}.o-bar-menu nav .fake-ul .fake-ul .mat-elevation-z4{box-shadow:none}.o-bar-menu .toggle{display:inline-block;padding:0 20px;font-size:20px;line-height:60px;text-decoration:none;border:none;cursor:pointer}.o-bar-menu .toggle+a{display:none!important}.o-bar-menu .menu{display:none;float:left!important}.o-bar-menu label.title-label{display:inline-block}.o-bar-menu .mat-icon.menu-icon{vertical-align:middle;display:inline-block;line-height:1;padding:0 4px}.o-bar-menu input:checked+.fake-ul{display:block}}@media all and (max-width: 330px){.o-bar-menu nav .fake-ul .fake-li{width:94%}}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: OBarMenuNestedComponent, selector: "o-bar-menu-nested", inputs: ["items"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
@@ -12109,6 +12241,936 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+class AppConfigFactory {
+    constructor(injector) {
+        this.injector = injector;
+        this.config = this.injector.get(APP_CONFIG);
+    }
+    factory() {
+        return new AppConfig(this.config);
+    }
+}
+function appConfigFactory(injector) {
+    return new AppConfigFactory(injector).factory();
+}
+
+class OUserInfoService {
+    constructor(injector) {
+        this.injector = injector;
+        this.subject = new Subject();
+    }
+    setUserInfo(info) {
+        this.storedInfo = info;
+        this.subject.next(info);
+    }
+    getUserInfo() {
+        return this.storedInfo;
+    }
+    getUserInfoObservable() {
+        return this.subject.asObservable();
+    }
+}
+OUserInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OUserInfoService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+OUserInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OUserInfoService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OUserInfoService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class AuthGuardService {
+    constructor(injector) {
+        this.injector = injector;
+        this.router = this.injector.get(Router);
+        this.authService = this.injector.get(AuthService);
+        this.oUserInfoService = this.injector.get(OUserInfoService);
+        this.permissionsService = this.injector.get(PermissionsService);
+    }
+    canActivate(next, state) {
+        const isLoggedIn = this.authService.isLoggedIn();
+        let result = isLoggedIn;
+        if (!isLoggedIn) {
+            this.permissionsService.restart();
+            this.router.navigate([Codes.LOGIN_ROUTE]);
+        }
+        if (isLoggedIn) {
+            this.setUserInformation();
+            if (!this.permissionsService.hasPermissions()) {
+                result = this.permissionsService.getUserPermissionsAsPromise();
+            }
+        }
+        return result;
+    }
+    setUserInformation() {
+        const sessionInfo = this.authService.getSessionInfo();
+        this.oUserInfoService.setUserInfo({
+            username: sessionInfo.user,
+            avatar: './assets/images/user_profile.png'
+        });
+    }
+}
+AuthGuardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuardService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthGuardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuardService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], 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;
+        this.router = router;
+        this.subject = new ReplaySubject();
+        this.router = this.injector.get(Router);
+    }
+    getModuleChangeObservable() {
+        this.router.events
+            .pipe(filter(e => e instanceof NavigationEnd), map(() => {
+            let route = this.router.routerState.root;
+            let routeTitle = '';
+            while (route.firstChild) {
+                route = route.firstChild;
+            }
+            if (route.snapshot.data['oAppHeaderTitle']) {
+                routeTitle = route.snapshot.data['oAppHeaderTitle'];
+            }
+            return routeTitle;
+        }))
+            .subscribe((title) => {
+            if (title) {
+                this.subject.next(title);
+            }
+            else {
+                this.subject.next("");
+            }
+        });
+        return this.subject.asObservable();
+    }
+}
+OModulesInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OModulesInfoService, deps: [{ token: i0.Injector }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+OModulesInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OModulesInfoService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OModulesInfoService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }]; } });
+
+class ShareCanActivateChildService {
+    constructor(injector) {
+        this.injector = injector;
+        this.router = this.injector.get(Router);
+        this.permissionsService = this.injector.get(PermissionsService);
+    }
+    setPermissionsGuard(guard) {
+        this.permissionsGuard = guard;
+    }
+    canActivateChildUsingPermissions(childRoute, state) {
+        if (this.permissionsGuard) {
+            return this.permissionsGuard.canActivateChild(childRoute, state);
+        }
+        return true;
+    }
+}
+ShareCanActivateChildService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ShareCanActivateChildService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+ShareCanActivateChildService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ShareCanActivateChildService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ShareCanActivateChildService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class PermissionsGuardService {
+    constructor(injector) {
+        this.injector = injector;
+        this.router = this.injector.get(Router);
+        this.permissionsService = this.injector.get(PermissionsService);
+        this.snackBarService = this.injector.get(SnackBarService);
+        this.shareCanActivateChildService = this.injector.get(ShareCanActivateChildService);
+        this.shareCanActivateChildService.setPermissionsGuard(this);
+    }
+    canActivateChild(childRoute, state) {
+        let restricted = false;
+        const oPermission = childRoute.data ? childRoute.data['oPermission'] : undefined;
+        const permissionId = (oPermission || {})['permissionId'];
+        if (Util.isDefined(permissionId)) {
+            restricted = this.permissionsService.isPermissionIdRouteRestricted(permissionId);
+            if (restricted) {
+                let msg = 'MESSAGES.NAVIGATION_NOT_ALLOWED_PERMISSION';
+                const route = oPermission['restrictedPermissionsRedirect'];
+                if (Util.isDefined(route)) {
+                    msg = 'MESSAGES.NAVIGATION_REDIRECTED_PERMISSION';
+                    this.router.navigate([route]);
+                }
+                this.snackBarService.open(msg);
+            }
+        }
+        return !restricted;
+    }
+}
+PermissionsGuardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionsGuardService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+PermissionsGuardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionsGuardService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionsGuardService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+function getPermissionsServiceProvider(injector) {
+    return new PermissionsService(injector);
+}
+class OPermissionsModule {
+}
+OPermissionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OPermissionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, imports: [CommonModule] });
+OPermissionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, providers: [
+        { provide: PermissionsGuardService, useClass: PermissionsGuardService },
+        { provide: OntimizePermissionsService, useFactory: permissionsServiceFactory, deps: [Injector] }
+    ], imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    providers: [
+                        { provide: PermissionsGuardService, useClass: PermissionsGuardService },
+                        { provide: OntimizePermissionsService, useFactory: permissionsServiceFactory, deps: [Injector] }
+                    ]
+                }]
+        }] });
+
+class OFormLayoutManagerComponentStateClass extends DefaultComponentStateClass {
+}
+
+class OFormLayoutManagerComponentStateService extends AbstractComponentStateService {
+    initialize(component) {
+        this.state = new OFormLayoutManagerComponentStateClass();
+        super.initialize(component);
+    }
+    initializeState(state) {
+        super.initializeState(state);
+    }
+}
+OFormLayoutManagerComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+OFormLayoutManagerComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerComponentStateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerComponentStateService, decorators: [{
+            type: Injectable
+        }] });
+
+class OGridComponentStateClass extends DefaultServiceComponentStateClass {
+    get sortColumn() {
+        return this['sort-column'];
+    }
+    set sortColumn(value) {
+        this['sort-column'] = value;
+    }
+}
+
+class OGridComponentStateService extends AbstractComponentStateService {
+    initialize(component) {
+        this.state = new OGridComponentStateClass();
+        super.initialize(component);
+    }
+    initializeState(state) {
+        super.initializeState(state);
+    }
+    getDataToStore() {
+        const dataToStore = Object.assign({}, this.state);
+        dataToStore['query-rows'] = this.component.queryRows;
+        dataToStore['currentPage'] = this.component.currentPage;
+        if (this.component.storePaginationState) {
+            dataToStore['queryRecordOffset'] = Math.max((this.state.queryRecordOffset - this.component.dataArray.length), (this.state.queryRecordOffset - this.component.queryRows));
+        }
+        else {
+            delete dataToStore['queryRecordOffset'];
+        }
+        if (Util.isDefined(this.component.sortColumnOrder)) {
+            dataToStore['sort-column'] = this.component.sortColumnOrder.columnName + Codes.COLUMNS_ALIAS_SEPARATOR +
+                (this.component.sortColumnOrder.ascendent ? Codes.ASC_SORT : Codes.DESC_SORT);
+        }
+        dataToStore['filter-case-sensitive'] = this.component.isFilterCaseSensitive();
+        if (this.component.quickFilter && Util.isDefined(this.component.quickFilterComponent)) {
+            dataToStore['quickFilterActiveColumns'] = this.component.quickFilterComponent.getActiveColumns().join(Codes.ARRAY_INPUT_SEPARATOR);
+        }
+        return dataToStore;
+    }
+}
+OGridComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+OGridComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridComponentStateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridComponentStateService, decorators: [{
+            type: Injectable
+        }] });
+
+class OListComponentStateClass extends DefaultServiceComponentStateClass {
+    get sortColumns() {
+        return this['sort-columns'];
+    }
+    set sortColumns(value) {
+        this['sort-columns'] = value;
+    }
+}
+
+class OListComponentStateService extends AbstractComponentStateService {
+    initialize(component) {
+        this.state = new OListComponentStateClass();
+        super.initialize(component);
+    }
+    initializeState(state) {
+        super.initializeState(state);
+    }
+    getDataToStore() {
+        let dataToStore = Object.assign({}, this.state);
+        dataToStore['query-rows'] = this.component.queryRows;
+        if (!this.component.storePaginationState) {
+            delete dataToStore['queryRecordOffset'];
+        }
+        if (this.component.quickFilter && Util.isDefined(this.component.quickFilterComponent)) {
+            dataToStore['quickFilterActiveColumns'] = this.component.quickFilterComponent.getActiveColumns().join(Codes.ARRAY_INPUT_SEPARATOR);
+        }
+        dataToStore['filter-case-sensitive'] = this.component.isFilterCaseSensitive();
+        dataToStore.selection = this.state.selection;
+        return dataToStore;
+    }
+    refreshSelection() {
+        this.state.selection = this.getSelectionState();
+    }
+    getSelectionState() {
+        const selection = [];
+        if (this.component) {
+            const keys = this.component.getKeys();
+            this.component.getSelectedItems().forEach(item => {
+                const data = {};
+                keys.forEach(key => {
+                    data[key] = item[key];
+                });
+                selection.push(data);
+            });
+        }
+        return selection;
+    }
+}
+OListComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+OListComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListComponentStateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListComponentStateService, decorators: [{
+            type: Injectable
+        }] });
+
+class OTableComponentStateClass extends DefaultServiceComponentStateClass {
+    constructor() {
+        super(...arguments);
+        this['grouped-column-types'] = [];
+    }
+    get filterBuilderValues() {
+        return this['filter-builder-values'];
+    }
+    set filterBuilderValues(value) {
+        this['filter-builder-values'] = value;
+    }
+    get selectColumnVisible() {
+        return this['select-column-visible'];
+    }
+    set selectColumnVisible(value) {
+        this['select-column-visible'] = value;
+    }
+    get quickFilterValue() {
+        return this['filter'];
+    }
+    set quickFilterValue(value) {
+        this['filter'] = value;
+    }
+    get columnsDisplay() {
+        return this['oColumns-display'];
+    }
+    set columnsDisplay(value) {
+        this['oColumns-display'] = value;
+    }
+    getColumnDisplay(oCol) {
+        return (this.columnsDisplay || []).find(col => col.attr === oCol.attr);
+    }
+    get initialConfiguration() {
+        return this['initial-configuration'];
+    }
+    set initialConfiguration(value) {
+        this['initial-configuration'] = value;
+    }
+    get sortColumns() {
+        return this['sort-columns'];
+    }
+    set sortColumns(value) {
+        this['sort-columns'] = value;
+    }
+    get groupedColumnTypes() {
+        return this['grouped-column-types'];
+    }
+    set groupedColumnTypes(value) {
+        this['grouped-column-types'] = value;
+    }
+    get filterColumns() {
+        return this['filter-columns'];
+    }
+    set filterColumns(value) {
+        this['filter-columns'] = value;
+    }
+    get filterColumnActiveByDefault() {
+        return this['filter-column-active-by-default'];
+    }
+    get groupedColumns() {
+        return this['grouped-columns'];
+    }
+    set groupedColumns(value) {
+        this['grouped-columns'] = value;
+    }
+    get columnValueFilters() {
+        return this['column-value-filters'] || [];
+    }
+    set columnValueFilters(value) {
+        this['column-value-filters'] = value;
+    }
+    get storedFilters() {
+        return this['user-stored-filters'] || [];
+    }
+    addStoredFilter(filter) {
+        if (!Util.isDefined(this['user-stored-filters'])) {
+            this['user-stored-filters'] = [];
+        }
+        this.storedFilters.push(filter);
+    }
+    deleteStoredFilter(filterName) {
+        const index = this.storedFilters.findIndex((item) => item.name === filterName);
+        if (index >= 0) {
+            this.storedFilters.splice(index, 1);
+        }
+    }
+    getStoredFilter(filterName) {
+        let result;
+        const filter = this.storedFilters.find((item) => item.name === filterName);
+        if (filter) {
+            result = filter['stored-filter'];
+        }
+        return result;
+    }
+    applyFilter(filterName) {
+        const filter = this.getStoredFilter(filterName);
+        if (filter) {
+            this.columnValueFilters = filter['column-value-filters'];
+            this.quickFilterValue = filter['filter'];
+            this.filterCaseSensitive = filter['filter-case-sensitive'];
+            this.filterBuilderValues = filter['filter-builder-values'];
+            this.oColumns = filter['oColumns'];
+        }
+    }
+    get storedConfigurations() {
+        return this['user-stored-configurations'] || [];
+    }
+    addStoredConfiguration(configuration) {
+        if (!Util.isDefined(this['user-stored-configurations'])) {
+            this['user-stored-configurations'] = [];
+        }
+        this.storedConfigurations.push(configuration);
+    }
+    deleteStoredConfiguration(configurationName) {
+        const index = this.storedConfigurations.findIndex((item) => item.name === configurationName);
+        if (index >= 0) {
+            this.storedConfigurations.splice(index, 1);
+        }
+    }
+    getStoredConfiguration(configurationName) {
+        return this.storedConfigurations.find((item) => item.name === configurationName);
+    }
+    applyConfiguration(configurationName) {
+        const configuration = this.getStoredConfiguration(configurationName);
+        if (configuration) {
+            const properties = configuration['stored-properties'] || [];
+            const conf = configuration['stored-configuration'];
+            this.copyPropertiesFromConfiguration(properties, conf);
+        }
+    }
+    reset(pageable) {
+        const result = {
+            'user-stored-filters': this.storedFilters,
+            'user-stored-configurations': this.storedConfigurations
+        };
+        if (pageable) {
+            result['totalQueryRecordsNumber'] = this.totalQueryRecordsNumber;
+        }
+        result['currentPage'] = 0;
+        Object.assign(this, {});
+        Object.assign(this, result);
+    }
+    copyPropertiesFromConfiguration(properties, configuration) {
+        properties.forEach(property => {
+            switch (property) {
+                case 'sort-columns':
+                    this.sortColumns = configuration['sort-columns'];
+                    break;
+                case 'oColumns-display':
+                    this.columnsDisplay = configuration['oColumns-display'];
+                    this.selectColumnVisible = configuration['select-column-visible'];
+                    break;
+                case 'quick-filter':
+                case 'columns-filter':
+                    this.columnValueFilters = configuration['column-value-filters'];
+                    break;
+                case 'grouped-columns':
+                    this.groupedColumns = configuration['grouped-columns'];
+                    break;
+                case 'page':
+                    this.currentPage = configuration['currentPage'];
+                    this.totalQueryRecordsNumber = configuration['totalQueryRecordsNumber'];
+                    this.queryRecordOffset = configuration['queryRecordOffset'];
+                    this.queryRows = configuration['query-rows'];
+                    break;
+                case 'filter-builder':
+                    this.filterBuilderValues = configuration['filter-builder'];
+                    break;
+            }
+        });
+    }
+}
+
+class OTableComponentStateService extends AbstractComponentStateService {
+    initialize(component) {
+        this.state = new OTableComponentStateClass();
+        super.initialize(component);
+    }
+    initializeState(state) {
+        super.initializeState(state);
+        const initialConfigurationRawObj = state.initialConfiguration || {};
+        state.initialConfiguration = new OTableComponentStateClass();
+        state.initialConfiguration.setData(initialConfigurationRawObj);
+    }
+    refreshSelection() {
+        this.state.selection = this.getSelectionState();
+    }
+    getDataToStore() {
+        const dataToStore = {};
+        const propertiesKeys = [
+            'sort-columns',
+            'oColumns-display',
+            'columns-filter',
+            'quick-filter',
+            'page',
+            'selection',
+            'initial-configuration',
+            'filter-columns',
+            'filter-column-active',
+            'grouped-columns',
+            'grouped-column-types',
+            'user-stored-filters',
+            'user-stored-configurations'
+        ];
+        Object.assign(dataToStore, this.getTablePropertiesToStore(propertiesKeys));
+        return dataToStore;
+    }
+    storeFilter(filter) {
+        let newFilter = { name: filter.name, description: filter.description };
+        const storedFilter = {};
+        Object.assign(storedFilter, this.getColumnFiltersState());
+        Object.assign(storedFilter, this.getColumnsQuickFilterState());
+        Object.assign(storedFilter, this.getFilterBuilderState());
+        newFilter['stored-filter'] = storedFilter;
+        this.state.addStoredFilter(newFilter);
+    }
+    storeConfiguration(configurationAgs, tableProperties) {
+        const newConfiguration = {};
+        this.component.storePaginationState = true;
+        const storedConfiguration = this.getTablePropertiesToStore(tableProperties);
+        this.component.storePaginationState = false;
+        newConfiguration['stored-configuration'] = storedConfiguration;
+        Object.assign(newConfiguration, configurationAgs);
+        newConfiguration['stored-properties'] = tableProperties;
+        this.state.addStoredConfiguration(newConfiguration);
+    }
+    getTablePropertiesToStore(properties) {
+        const result = {};
+        properties.forEach(prop => {
+            Object.assign(result, this.getTablePropertyToStore(prop));
+        });
+        return result;
+    }
+    getTablePropertyToStore(property) {
+        let result = {};
+        switch (property) {
+            case 'sort-columns':
+                result = this.getSortState();
+                break;
+            case 'oColumns-display':
+                result = this.getColumnsDisplayState();
+                break;
+            case 'quick-filter':
+                result = this.getColumnsQuickFilterState();
+                break;
+            case 'columns-filter':
+                result = this.getColumnFiltersState();
+                break;
+            case 'page':
+                result = this.getPageState();
+                break;
+            case 'selection':
+                result['selection'] = this.getSelectionState();
+                break;
+            case 'initial-configuration':
+                result = this.getInitialConfigurationState();
+                break;
+            case 'filter-column-active':
+                result['filter-column-active'] = this.component.isColumnFiltersActive;
+                break;
+            case 'filter-columns':
+                result['filter-columns'] = this.component.filterColumns;
+                break;
+            case 'grouped-columns':
+                result['grouped-columns'] = this.component.groupedColumnsArray;
+                break;
+            case 'grouped-column-types':
+                result['grouped-column-types'] = this.component.groupedColumnTypes;
+                break;
+            case 'user-stored-filters':
+                result['user-stored-filters'] = this.state.storedFilters;
+                break;
+            case 'user-stored-configurations':
+                result['user-stored-configurations'] = this.state.storedConfigurations;
+                break;
+            case 'filter-builder':
+                if (this.component.filterBuilder) {
+                    result['filter-builder'] = this.component.filterBuilder.getFilterValues();
+                }
+                break;
+        }
+        return result;
+    }
+    getColumnsDisplayState() {
+        const oColumnsData = [];
+        this.component.oTableOptions.columns.forEach((oCol) => {
+            oColumnsData.push({
+                attr: oCol.attr,
+                visible: oCol.visible,
+                width: oCol.getWidthToStore()
+            });
+        });
+        return {
+            'oColumns-display': oColumnsData,
+            'select-column-visible': this.component.oTableOptions.selectColumn.visible
+        };
+    }
+    getColumnsQuickFilterState() {
+        const tableOptions = this.component.oTableOptions;
+        const oColumnsData = [];
+        tableOptions.columns.forEach((oCol) => {
+            oColumnsData.push({
+                attr: oCol.attr,
+                searchable: oCol.searchable,
+                searching: oCol.searching
+            });
+        });
+        return {
+            'oColumns': oColumnsData,
+            'filter-case-sensitive': tableOptions.filterCaseSensitive,
+            'filter': this.component.oTableQuickFilterComponent ? this.component.oTableQuickFilterComponent.value : ''
+        };
+    }
+    getFilterBuilderState() {
+        const result = {};
+        if (this.component.filterBuilder) {
+            let filterBuilder = this.component.filterBuilder.getFilterValues();
+            if (!Util.isObjectEmpty(filterBuilder)) {
+                result['filter-builder-values'] = filterBuilder;
+            }
+        }
+        return result;
+    }
+    getColumnFiltersState() {
+        const result = {};
+        if (this.component.dataSource) {
+            const columnValueFilters = this.component.dataSource.getColumnValueFilters();
+            if (columnValueFilters.length > 0) {
+                result['column-value-filters'] = columnValueFilters;
+            }
+        }
+        return result;
+    }
+    getPageState() {
+        const result = {
+            'query-rows': this.component.matpaginator ? this.component.matpaginator.pageSize : ''
+        };
+        if (this.component.currentPage > 0 && this.component.storePaginationState) {
+            result.currentPage = this.component.currentPage;
+        }
+        if (this.component.pageable && this.component.storePaginationState) {
+            result.totalQueryRecordsNumber = this.component.state.totalQueryRecordsNumber;
+            result.queryRecordOffset = Math.max((this.component.state.queryRecordOffset - this.component.dataSource.renderedData.length), (this.component.state.queryRecordOffset - this.component.queryRows));
+        }
+        return result;
+    }
+    getSelectionState() {
+        const selection = [];
+        if (this.component && this.component.keepSelectedItems) {
+            const tableKeys = this.component.getKeys();
+            this.component.getSelectedItems().forEach(item => {
+                const data = {};
+                tableKeys.forEach(key => {
+                    data[key] = item[key];
+                });
+                selection.push(data);
+            });
+        }
+        return selection;
+    }
+    getInitialConfigurationState() {
+        const oColumnsData = [];
+        Util.parseArray(this.component.visibleColumns, true).forEach((columnAttr) => {
+            let oCol = this.component.getOColumn(columnAttr);
+            oColumnsData.push({
+                attr: oCol.attr,
+                visible: true,
+                width: oCol.definition ? oCol.definition.originalWidth : undefined
+            });
+        });
+        return {
+            'initial-configuration': {
+                'oColumns-display': oColumnsData,
+                'sort-columns': this.component.sortColumns,
+                'select-column-visible': this.component.oTableOptions.selectColumn.visible,
+                'filter-case-sensitive': this.component.filterCaseSensitive,
+                'query-rows': this.component.originalQueryRows,
+                'filter-column-active-by-default': this.component.filterColumnActiveByDefault,
+                'filter-columns': this.component.originalFilterColumns,
+                'grouped-columns': this.component.originalGroupedColumnsArray
+            }
+        };
+    }
+    getSortState() {
+        const sortColumns = [];
+        this.component.sort.getSortColumns().forEach(sortData => {
+            sortColumns.push(sortData.id + Codes.COLUMNS_ALIAS_SEPARATOR + sortData.direction);
+        });
+        return {
+            'sort-columns': sortColumns.join(Codes.ARRAY_INPUT_SEPARATOR)
+        };
+    }
+}
+OTableComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+OTableComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableComponentStateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableComponentStateService, decorators: [{
+            type: Injectable
+        }] });
+
+class OTranslateHttpLoader extends TranslateHttpLoader {
+    constructor(httpClient, prefix = OTranslateService.ASSETS_PATH, suffix = OTranslateService.ASSETS_EXTENSION, injector) {
+        super(httpClient, prefix, suffix);
+        this.injector = injector;
+        this.appConfig = this.injector.get(AppConfig);
+        this.httpClient = httpClient;
+    }
+    getAssetsPath() {
+        return this.prefix;
+    }
+    getAssetsExtension() {
+        return this.suffix;
+    }
+    getLocalTranslation(lang) {
+        let innerObserver;
+        const dataObservable = new Observable(observer => innerObserver = observer).pipe(share());
+        super.getTranslation(lang)
+            .subscribe((res) => {
+            innerObserver.next(res);
+            innerObserver.complete();
+        }, error => {
+            innerObserver.next(undefined);
+        }, () => innerObserver.complete());
+        return dataObservable;
+    }
+    getTranslation(lang) {
+        const translationOrigins = [];
+        translationOrigins.push(this.getLocalTranslation(lang));
+        if (this.appConfig.useRemoteBundle()) {
+            translationOrigins.push(this.getRemoteBundle(lang));
+        }
+        let innerObserver;
+        const dataObservable = new Observable(observer => innerObserver = observer).pipe(share());
+        combineLatest(translationOrigins).subscribe((res) => {
+            const staticBundle = res[0] || {};
+            const remoteBundle = res[1] || {};
+            const allBundles = Object.assign(staticBundle, remoteBundle);
+            innerObserver.next(allBundles);
+        });
+        return dataObservable;
+    }
+    getRemoteBundle(lang) {
+        const bundleEndpoint = this.appConfig.getBundleEndpoint();
+        if (!bundleEndpoint) {
+            return of([]);
+        }
+        const url = bundleEndpoint + '?lang=' + lang;
+        return this.httpClient.get(url).pipe(map((resp) => {
+            if (resp.code === Codes.ONTIMIZE_SUCCESSFUL_CODE) {
+                return this.parseBundleResponse(resp.data);
+            }
+            return resp;
+        }), catchError(err => {
+            console.log('Remote Bundle service is not available', err);
+            return of([]);
+        }));
+    }
+    parseBundleResponse(data) {
+        const result = {};
+        if (data) {
+            data.forEach((item) => {
+                result[item[OTranslateHttpLoader.BUNDLE_KEY]] = item[OTranslateHttpLoader.BUNDLE_VALUE];
+            });
+        }
+        return result;
+    }
+}
+OTranslateHttpLoader.BUNDLE_KEY = 'key';
+OTranslateHttpLoader.BUNDLE_VALUE = 'value';
+
+class OTranslateParser extends TranslateDefaultParser {
+    constructor() {
+        super(...arguments);
+        this.templateMatcher = /{\s?([0-9][^{}\s]*)\s?}/g;
+    }
+    interpolate(expr, params) {
+        if (typeof expr !== 'string' || !params) {
+            return expr;
+        }
+        return expr.replace(this.templateMatcher, (substring, index) => {
+            const argValue = Util.isDefined(params[index]) ? params[index] : '';
+            return !isNaN(parseInt(index, 10)) ? argValue : substring;
+        });
+    }
+}
+OTranslateParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTranslateParser, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+OTranslateParser.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTranslateParser });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTranslateParser, decorators: [{
+            type: Injectable
+        }] });
+
+class AppearanceService {
+    constructor(injector) {
+        this.injector = injector;
+        this.darkThemeClass = 'o-dark';
+        this.isDarkModeSubject = new BehaviorSubject(false);
+        this.isDarkMode$ = this.isDarkModeSubject.asObservable();
+        this.localStorageService = this.injector.get(LocalStorageService);
+        this._document = inject(DOCUMENT);
+        const config = this.localStorageService.getStoredData();
+        this.isDarkMode$.subscribe(x => this.updateThemeClass(x));
+        if (config && config["theme"] && typeof config["theme"].isDark === 'boolean') {
+            const isDark = config["theme"].isDark;
+            this.isDarkModeSubject.next(isDark);
+        }
+    }
+    setDarkMode(isDarkMode) {
+        const config = this.localStorageService.getStoredData();
+        if (config) {
+            config["theme"] = config["theme"] || {};
+            config["theme"].isDark = isDarkMode;
+        }
+        this.localStorageService.setLocalStorage(config);
+        this.isDarkModeSubject.next(isDarkMode);
+    }
+    isDarkMode() {
+        return this.isDarkModeSubject.value;
+    }
+    updateThemeClass(isDark) {
+        if (isDark) {
+            this._document.body.classList.add(this.darkThemeClass);
+        }
+        else {
+            this._document.body.classList.remove(this.darkThemeClass);
+        }
+    }
+}
+AppearanceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppearanceService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AppearanceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppearanceService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppearanceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class CurrencyUtil {
+    static getCurrencyCode(language) {
+        const code = this.languageToCurrencyCode[language];
+        if (code) {
+            return code;
+        }
+        else {
+            return 'EUR';
+        }
+    }
+    static getCurrencyCodeFromSymbol(symbol) {
+        const currencyCode = Object.keys(this.currencyCodeToSymbol).find(code => this.currencyCodeToSymbol[code] === symbol);
+        return currencyCode;
+    }
+}
+CurrencyUtil.languageToCurrencyCode = {
+    'es': 'EUR',
+    'en': 'USD',
+    'pt': 'BRL',
+    'fr': 'EUR',
+    'de': 'EUR',
+    'it': 'EUR',
+    'ja': 'JPY',
+    'zh': 'CNY',
+    'ru': 'RUB',
+    'ar': 'AED',
+    'cr': 'CRC',
+    'ng': 'NGN',
+    'ph': 'PHP',
+    'pl': 'PLN',
+    'py': 'PYG',
+    'th': 'THB',
+    'ua': 'UAH',
+    'vn': 'VND',
+};
+CurrencyUtil.currencyCodeToSymbol = {
+    EUR: '€',
+    USD: '$',
+    BRL: 'R$',
+    JPY: '¥',
+    CNY: '¥',
+    RUB: '₽',
+    AED: 'د.إ',
+    CRC: '₡',
+    NGN: '₦',
+    PHP: '₱',
+    PLN: 'zł',
+    PYG: '₲',
+    THB: '฿',
+    UAH: '₴',
+    VND: '₫',
+};
+
 const DEFAULT_INPUTS_O_BUTTON = [
     'oattr: attr',
     'olabel: label',
@@ -12125,17 +13187,26 @@ const DEFAULT_OUTPUTS_O_BUTTON = [
     'click'
 ];
 class OButtonComponent {
-    constructor() {
+    constructor(injector, actRoute) {
+        this.injector = injector;
+        this.actRoute = actRoute;
         this.iconPosition = Codes.ICON_POSITION_LEFT;
         this.enabled = true;
+        this.visible = true;
         this.onClick = new EventEmitter();
         this.click = new EventEmitter();
         this.otype = OButtonComponent.DEFAULT_TYPE;
+        this.permissionsService = this.injector.get(PermissionsService);
     }
     ngOnInit() {
         if (this.otype) {
             this.otype = this.otype.toUpperCase();
         }
+        this.permissions = this.permissionsService.getOButtonPermissions(this.oattr, this.actRoute);
+        if (Util.isDefined(this.permissions)) {
+            this.enabled = this.permissions.enabled;
+            this.visible = this.permissions.visible;
+        }
     }
     onButtonClick(event) {
         event.stopPropagation();
@@ -12168,10 +13239,13 @@ class OButtonComponent {
     isIconButton() {
         return this.otype === 'ICON';
     }
+    isVisible() {
+        return this.visible;
+    }
 }
 OButtonComponent.DEFAULT_TYPE = 'STROKED';
-OButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OButtonComponent, selector: "o-button", inputs: { oattr: ["attr", "oattr"], olabel: ["label", "olabel"], otype: ["type", "otype"], icon: "icon", svgIcon: ["svg-icon", "svgIcon"], iconPosition: ["icon-position", "iconPosition"], image: "image", enabled: "enabled", color: "color" }, outputs: { onClick: "onClick", click: "click" }, host: { properties: { "class.o-button": "true", "class.o-button-icon-position-top": "iconPosition===\"top\"", "class.o-button-icon-position-bottom": "iconPosition===\"bottom\"" } }, ngImport: i0, template: "<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isBasic()\" mat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isRaised()\" mat-raised-button class=\"mat-raised-button\"\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isStroked()\" mat-stroked-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFlat()\" mat-flat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isIconButton()\" mat-icon-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFab()\" mat-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isMiniFab()\" mat-mini-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n\n<ng-template #iconTemplate>\n  <img src=\"{{ image }}\" class=\"o-button-image\" *ngIf=\"image!=undefined\" alt=\"button image\" />\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"icon!==undefined\" style=\"vertical-align:middle\">{{ icon }}\n  </mat-icon>\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"svgIcon!==undefined\" style=\"vertical-align:middle\" [svgIcon]=\"svgIcon\"></mat-icon>\n</ng-template>\n\n<ng-template #buttonTemplate>\n\n  <ng-container *ngIf=\"iconPosition==='left' || iconPosition==='top' \">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n\n  <br *ngIf=\"iconPosition==='top'\" />\n\n  {{ olabel | oTranslate }}\n\n  <br *ngIf=\"iconPosition==='bottom'\" />\n\n  <ng-container *ngIf=\"iconPosition==='right' || iconPosition==='bottom'\">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".o-button{display:inline-block;pointer-events:none}.o-button.o-button-icon-position-bottom .mat-mdc-button,.o-button.o-button-icon-position-bottom .mat-mdc-unelevated-button,.o-button.o-button-icon-position-bottom .mat-mdc-raised-button,.o-button.o-button-icon-position-bottom .mat-mdc-outlined-button,.o-button.o-button-icon-position-top .mat-mdc-button,.o-button.o-button-icon-position-top .mat-mdc-unelevated-button,.o-button.o-button-icon-position-top .mat-mdc-raised-button,.o-button.o-button-icon-position-top .mat-mdc-outlined-button{height:auto;line-height:normal}.o-button button{pointer-events:auto}.o-button button.mat-mdc-button,.o-button button.mat-mdc-unelevated-button,.o-button button.mat-mdc-raised-button,.o-button button.mat-mdc-outlined-button{width:100%}.o-button button *{pointer-events:none}.o-button button .o-button-image{max-height:24px;vertical-align:middle}\n"], dependencies: [{ 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: 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: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+OButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OButtonComponent, deps: [{ token: i0.Injector }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+OButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OButtonComponent, selector: "o-button", inputs: { oattr: ["attr", "oattr"], olabel: ["label", "olabel"], otype: ["type", "otype"], icon: "icon", svgIcon: ["svg-icon", "svgIcon"], iconPosition: ["icon-position", "iconPosition"], image: "image", enabled: "enabled", color: "color" }, outputs: { onClick: "onClick", click: "click" }, host: { properties: { "class.o-button": "true", "class.o-button-icon-position-top": "iconPosition===\"top\"", "class.o-button-icon-position-bottom": "iconPosition===\"bottom\"" } }, ngImport: i0, template: "<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isBasic() && isVisible()\" mat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isRaised() && isVisible()\" mat-raised-button class=\"mat-raised-button\"\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isStroked() && isVisible()\" mat-stroked-button\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFlat() && isVisible()\" mat-flat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isIconButton() && isVisible()\" mat-icon-button\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFab() && isVisible()\" mat-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isMiniFab() && isVisible()\" mat-mini-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n\n<ng-template #iconTemplate>\n  <img src=\"{{ image }}\" class=\"o-button-image\" *ngIf=\"image!=undefined\" alt=\"button image\" />\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"icon!==undefined\" style=\"vertical-align:middle\">{{ icon }}\n  </mat-icon>\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"svgIcon!==undefined\" style=\"vertical-align:middle\" [svgIcon]=\"svgIcon\"></mat-icon>\n</ng-template>\n\n<ng-template #buttonTemplate>\n\n  <ng-container *ngIf=\"iconPosition==='left' || iconPosition==='top' \">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n\n  <br *ngIf=\"iconPosition==='top'\" />\n\n  {{ olabel | oTranslate }}\n\n  <br *ngIf=\"iconPosition==='bottom'\" />\n\n  <ng-container *ngIf=\"iconPosition==='right' || iconPosition==='bottom'\">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".o-button{display:inline-block;pointer-events:none}.o-button.o-button-icon-position-bottom .mat-mdc-button,.o-button.o-button-icon-position-bottom .mat-mdc-unelevated-button,.o-button.o-button-icon-position-bottom .mat-mdc-raised-button,.o-button.o-button-icon-position-bottom .mat-mdc-outlined-button,.o-button.o-button-icon-position-top .mat-mdc-button,.o-button.o-button-icon-position-top .mat-mdc-unelevated-button,.o-button.o-button-icon-position-top .mat-mdc-raised-button,.o-button.o-button-icon-position-top .mat-mdc-outlined-button{height:auto;line-height:normal}.o-button button{pointer-events:auto}.o-button button.mat-mdc-button,.o-button button.mat-mdc-unelevated-button,.o-button button.mat-mdc-raised-button,.o-button button.mat-mdc-outlined-button{width:100%}.o-button button *{pointer-events:none}.o-button button .o-button-image{max-height:24px;vertical-align:middle}\n"], dependencies: [{ 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: 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: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -12182,8 +13256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         '[class.o-button]': 'true',
                         '[class.o-button-icon-position-top]': 'iconPosition==="top"',
                         '[class.o-button-icon-position-bottom]': 'iconPosition==="bottom"'
-                    }, template: "<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isBasic()\" mat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isRaised()\" mat-raised-button class=\"mat-raised-button\"\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isStroked()\" mat-stroked-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFlat()\" mat-flat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isIconButton()\" mat-icon-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFab()\" mat-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isMiniFab()\" mat-mini-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n\n<ng-template #iconTemplate>\n  <img src=\"{{ image }}\" class=\"o-button-image\" *ngIf=\"image!=undefined\" alt=\"button image\" />\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"icon!==undefined\" style=\"vertical-align:middle\">{{ icon }}\n  </mat-icon>\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"svgIcon!==undefined\" style=\"vertical-align:middle\" [svgIcon]=\"svgIcon\"></mat-icon>\n</ng-template>\n\n<ng-template #buttonTemplate>\n\n  <ng-container *ngIf=\"iconPosition==='left' || iconPosition==='top' \">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n\n  <br *ngIf=\"iconPosition==='top'\" />\n\n  {{ olabel | oTranslate }}\n\n  <br *ngIf=\"iconPosition==='bottom'\" />\n\n  <ng-container *ngIf=\"iconPosition==='right' || iconPosition==='bottom'\">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".o-button{display:inline-block;pointer-events:none}.o-button.o-button-icon-position-bottom .mat-mdc-button,.o-button.o-button-icon-position-bottom .mat-mdc-unelevated-button,.o-button.o-button-icon-position-bottom .mat-mdc-raised-button,.o-button.o-button-icon-position-bottom .mat-mdc-outlined-button,.o-button.o-button-icon-position-top .mat-mdc-button,.o-button.o-button-icon-position-top .mat-mdc-unelevated-button,.o-button.o-button-icon-position-top .mat-mdc-raised-button,.o-button.o-button-icon-position-top .mat-mdc-outlined-button{height:auto;line-height:normal}.o-button button{pointer-events:auto}.o-button button.mat-mdc-button,.o-button button.mat-mdc-unelevated-button,.o-button button.mat-mdc-raised-button,.o-button button.mat-mdc-outlined-button{width:100%}.o-button button *{pointer-events:none}.o-button button .o-button-image{max-height:24px;vertical-align:middle}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { enabled: [] } });
+                    }, template: "<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isBasic() && isVisible()\" mat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isRaised() && isVisible()\" mat-raised-button class=\"mat-raised-button\"\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isStroked() && isVisible()\" mat-stroked-button\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFlat() && isVisible()\" mat-flat-button [class.mat-icon-button]=\"needsIconButtonClass\"\n  [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isIconButton() && isVisible()\" mat-icon-button\n  [class.mat-icon-button]=\"needsIconButtonClass\" [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isFab() && isVisible()\" mat-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n<button type=\"button\" (click)=\"onButtonClick($event)\" *ngIf=\"isMiniFab() && isVisible()\" mat-mini-fab [disabled]=\"!enabled\" [color]=\"color\">\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n\n\n<ng-template #iconTemplate>\n  <img src=\"{{ image }}\" class=\"o-button-image\" *ngIf=\"image!=undefined\" alt=\"button image\" />\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"icon!==undefined\" style=\"vertical-align:middle\">{{ icon }}\n  </mat-icon>\n  <mat-icon class=\"material-icons o-button-icon\" *ngIf=\"svgIcon!==undefined\" style=\"vertical-align:middle\" [svgIcon]=\"svgIcon\"></mat-icon>\n</ng-template>\n\n<ng-template #buttonTemplate>\n\n  <ng-container *ngIf=\"iconPosition==='left' || iconPosition==='top' \">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n\n  <br *ngIf=\"iconPosition==='top'\" />\n\n  {{ olabel | oTranslate }}\n\n  <br *ngIf=\"iconPosition==='bottom'\" />\n\n  <ng-container *ngIf=\"iconPosition==='right' || iconPosition==='bottom'\">\n    <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".o-button{display:inline-block;pointer-events:none}.o-button.o-button-icon-position-bottom .mat-mdc-button,.o-button.o-button-icon-position-bottom .mat-mdc-unelevated-button,.o-button.o-button-icon-position-bottom .mat-mdc-raised-button,.o-button.o-button-icon-position-bottom .mat-mdc-outlined-button,.o-button.o-button-icon-position-top .mat-mdc-button,.o-button.o-button-icon-position-top .mat-mdc-unelevated-button,.o-button.o-button-icon-position-top .mat-mdc-raised-button,.o-button.o-button-icon-position-top .mat-mdc-outlined-button{height:auto;line-height:normal}.o-button button{pointer-events:auto}.o-button button.mat-mdc-button,.o-button button.mat-mdc-unelevated-button,.o-button button.mat-mdc-raised-button,.o-button button.mat-mdc-outlined-button{width:100%}.o-button button *{pointer-events:none}.o-button button .o-button-image{max-height:24px;vertical-align:middle}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.ActivatedRoute }]; }, propDecorators: { enabled: [] } });
 
 class OButtonModule {
 }
@@ -13893,119 +14967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['mouseenter']
             }] } });
 
-class OGridComponentStateClass extends DefaultServiceComponentStateClass {
-    get sortColumn() {
-        return this['sort-column'];
-    }
-    set sortColumn(value) {
-        this['sort-column'] = value;
-    }
-}
-
-class OGridComponentStateService extends AbstractComponentStateService {
-    initialize(component) {
-        this.state = new OGridComponentStateClass();
-        super.initialize(component);
-    }
-    initializeState(state) {
-        super.initializeState(state);
-    }
-    getDataToStore() {
-        const dataToStore = Object.assign({}, this.state);
-        dataToStore['query-rows'] = this.component.queryRows;
-        dataToStore['currentPage'] = this.component.currentPage;
-        if (this.component.storePaginationState) {
-            dataToStore['queryRecordOffset'] = Math.max((this.state.queryRecordOffset - this.component.dataArray.length), (this.state.queryRecordOffset - this.component.queryRows));
-        }
-        else {
-            delete dataToStore['queryRecordOffset'];
-        }
-        if (Util.isDefined(this.component.sortColumnOrder)) {
-            dataToStore['sort-column'] = this.component.sortColumnOrder.columnName + Codes.COLUMNS_ALIAS_SEPARATOR +
-                (this.component.sortColumnOrder.ascendent ? Codes.ASC_SORT : Codes.DESC_SORT);
-        }
-        dataToStore['filter-case-sensitive'] = this.component.isFilterCaseSensitive();
-        if (this.component.quickFilter && Util.isDefined(this.component.quickFilterComponent)) {
-            dataToStore['quickFilterActiveColumns'] = this.component.quickFilterComponent.getActiveColumns().join(Codes.ARRAY_INPUT_SEPARATOR);
-        }
-        return dataToStore;
-    }
-}
-OGridComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-OGridComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridComponentStateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridComponentStateService, decorators: [{
-            type: Injectable
-        }] });
-
-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 OFormLayoutManagerComponentStateClass extends DefaultComponentStateClass {
-}
-
-class OFormLayoutManagerComponentStateService extends AbstractComponentStateService {
-    initialize(component) {
-        this.state = new OFormLayoutManagerComponentStateClass();
-        super.initialize(component);
-    }
-    initializeState(state) {
-        super.initializeState(state);
-    }
-}
-OFormLayoutManagerComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-OFormLayoutManagerComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerComponentStateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerComponentStateService, decorators: [{
-            type: Injectable
-        }] });
-
-class ShareCanActivateChildService {
-    constructor(injector) {
-        this.injector = injector;
-        this.router = this.injector.get(Router);
-        this.permissionsService = this.injector.get(PermissionsService);
-    }
-    setPermissionsGuard(guard) {
-        this.permissionsGuard = guard;
-    }
-    canActivateChildUsingPermissions(childRoute, state) {
-        if (this.permissionsGuard) {
-            return this.permissionsGuard.canActivateChild(childRoute, state);
-        }
-        return true;
-    }
-}
-ShareCanActivateChildService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ShareCanActivateChildService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-ShareCanActivateChildService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ShareCanActivateChildService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ShareCanActivateChildService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+const O_GLOBAL_CONFIG = new InjectionToken('o-global-config');
 
 class CanActivateFormLayoutChildGuard {
     constructor(injector) {
@@ -14686,6 +15648,21 @@ class OFormLayoutManagerComponent {
                 this.updateStateStorage();
             }));
         }
+        this.getInjectionTokenConfig();
+    }
+    getInjectionTokenConfig() {
+        try {
+            const oGlobalConfig = this.injector.get(O_GLOBAL_CONFIG);
+            if (Util.isDefined(oGlobalConfig.storeState)) {
+                this.storeState = oGlobalConfig.storeState;
+                if (!this.storeState) {
+                    this.subscription.unsubscribe();
+                }
+            }
+            ;
+        }
+        catch (error) {
+        }
     }
     get state() {
         return this.componentStateService.state;
@@ -15216,8 +16193,11 @@ class AbstractOServiceBaseComponent {
             this.queryOnEventSubscription.unsubscribe();
         }
     }
+    canSetStaticData(staticData) {
+        return Util.isDefined(staticData);
+    }
     ngOnChanges(changes) {
-        if (Util.isDefined(changes.staticData)) {
+        if (this.canSetStaticData(changes.staticData?.currentValue)) {
             this.setData(changes.staticData.currentValue);
         }
     }
@@ -15283,6 +16263,11 @@ class AbstractOServiceBaseComponent {
         }
         return result;
     }
+    clearData() {
+        this.state.queryRecordOffset = 0;
+        this.state.totalQueryRecordsNumber = 0;
+        this.setData([], []);
+    }
     queryData(filter, ovrrArgs) {
         const queryMethodName = this.pageable ? this.paginatedQueryMethod : this.queryMethod;
         if (!this.dataService || !(queryMethodName in this.dataService) || !this.entity) {
@@ -15300,9 +16285,7 @@ class AbstractOServiceBaseComponent {
             this.abortQuery.next(false);
             this.queryArguments = this.getQueryArguments(filter, ovrrArgs);
             if (this.abortQuery.value) {
-                this.state.queryRecordOffset = 0;
-                this.state.totalQueryRecordsNumber = 0;
-                this.setData([], []);
+                this.clearData();
                 this.cd.detectChanges();
                 this.loadingSubject.next(false);
                 return;
@@ -15580,6 +16563,9 @@ class AbstractOServiceComponent extends AbstractOServiceBaseComponent {
         this.clickDelay = 200;
         this.clickPrevent = false;
         this._quickFilterAppearance = 'outline';
+        this.mutationObservers = [];
+        this.enabledInsertButton = true;
+        this.enabledRefreshButton = true;
         this._currentPage = 0;
         this.permissionsService = this.injector.get(PermissionsService);
         this.translateService = this.injector.get(OTranslateService);
@@ -15595,6 +16581,18 @@ class AbstractOServiceComponent extends AbstractOServiceBaseComponent {
         }
         catch (e) {
         }
+        this.getGlobalInjectionTokenConfig();
+    }
+    getGlobalInjectionTokenConfig() {
+        try {
+            const oGlobalConfig = this.injector.get(O_GLOBAL_CONFIG);
+            if (Util.isDefined(oGlobalConfig.storeState)) {
+                this.storeState = oGlobalConfig.storeState;
+            }
+            ;
+        }
+        catch (error) {
+        }
     }
     initialize() {
         super.initialize();
@@ -15709,6 +16707,52 @@ class AbstractOServiceComponent extends AbstractOServiceBaseComponent {
             }
         }
     }
+    setButtonPermissions(actionsPermissions) {
+        if (Util.isDefined(actionsPermissions)) {
+            this.setPermission('insert', 'insertButton', 'enabledInsertButton', actionsPermissions);
+            this.setPermission('refresh', 'refreshButton', 'enabledRefreshButton', actionsPermissions);
+            this.setPermission('delete', 'deleteButton', 'enabledDeleteButton', actionsPermissions);
+        }
+    }
+    setPermission(attr, visibleProp, enabledProp, actionsPermissions) {
+        const perm = this.getPermissionByAttr(attr, actionsPermissions);
+        if (Util.isDefined(perm)) {
+            this[visibleProp] = perm.visible;
+            this[enabledProp] = perm.enabled;
+        }
+    }
+    manageCustomPermissions(actionsPermissions, selector) {
+        const customPermissions = actionsPermissions.filter(perm => !['insert', 'refresh', 'delete'].includes(perm.attr));
+        customPermissions.forEach(permission => {
+            this.managePermission(this.elRef, permission, this.mutationObservers, selector);
+        });
+    }
+    getActionsPermissions(permissions) {
+        return Util.isDefined(permissions) ? (permissions.actions || []) : [];
+    }
+    getPermissionByAttr(attr, actionsPermissions) {
+        return actionsPermissions.find((perm) => perm.attr === attr);
+    }
+    managePermission(elementRef, permission, mutationObservers, selector, attr) {
+        let elementByAction;
+        const attrAction = Util.isDefined(attr) ? attr : permission.attr;
+        const allElements = elementRef.nativeElement.querySelectorAll(selector);
+        allElements.forEach(element => {
+            if (element.getAttribute('attr') === attrAction) {
+                elementByAction = element;
+            }
+        });
+        if (Util.isDefined(elementByAction)) {
+            if (!permission.visible) {
+                elementByAction.remove();
+            }
+            else if (!permission.enabled) {
+                elementByAction.disabled = true;
+                const mutationObserver = PermissionsUtils.registerDisabledChangesInDom(elementByAction);
+                mutationObservers.push(mutationObserver);
+            }
+        }
+    }
     getEncodedParentKeys() {
         let encoded;
         if (Object.keys(this._pKeysEquiv).length > 0) {
@@ -16382,9 +17426,7 @@ class OMatSort extends MatSort {
         let propertyA = '';
         let propertyB = '';
         [propertyA, propertyB] = [a[this.activeSortColumn], b[this.activeSortColumn]];
-        const valueA = typeof propertyA === 'undefined' ? '' : propertyA === '' ? propertyA : isNaN(+propertyA) ? propertyA.toString().trim().toLowerCase() : +propertyA;
-        const valueB = typeof propertyB === 'undefined' ? '' : propertyB === '' ? propertyB : isNaN(+propertyB) ? propertyB.toString().trim().toLowerCase() : +propertyB;
-        return (valueA <= valueB ? -1 : 1) * (this.activeSortDirection === 'asc' ? 1 : -1);
+        return Util.sortFunction(propertyA, propertyB, this.activeSortDirection);
     }
 }
 OMatSort.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OMatSort, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -16401,51 +17443,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['matSortChange']
             }] } });
 
-class AppearanceService {
-    constructor(injector) {
-        this.injector = injector;
-        this.darkThemeClass = 'o-dark';
-        this.isDarkModeSubject = new BehaviorSubject(false);
-        this.isDarkMode$ = this.isDarkModeSubject.asObservable();
-        this.localStorageService = this.injector.get(LocalStorageService);
-        this._document = inject(DOCUMENT);
-        const config = this.localStorageService.getStoredData();
-        this.isDarkMode$.subscribe(x => this.updateThemeClass(x));
-        if (config && config["theme"] && typeof config["theme"].isDark === 'boolean') {
-            const isDark = config["theme"].isDark;
-            this.isDarkModeSubject.next(isDark);
-        }
-    }
-    setDarkMode(isDarkMode) {
-        const config = this.localStorageService.getStoredData();
-        if (config) {
-            config["theme"] = config["theme"] || {};
-            config["theme"].isDark = isDarkMode;
-        }
-        this.localStorageService.setLocalStorage(config);
-        this.isDarkModeSubject.next(isDarkMode);
-    }
-    isDarkMode() {
-        return this.isDarkModeSubject.value;
-    }
-    updateThemeClass(isDark) {
-        if (isDark) {
-            this._document.body.classList.add(this.darkThemeClass);
-        }
-        else {
-            this._document.body.classList.remove(this.darkThemeClass);
-        }
-    }
-}
-AppearanceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppearanceService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-AppearanceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppearanceService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppearanceService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
 class OSkeletonComponent {
     constructor(injector) {
         this.injector = injector;
@@ -16554,6 +17551,9 @@ class OGridComponent extends AbstractOServiceComponent {
     }
     ngOnInit() {
         this.initialize();
+        this.permissions = this.permissionsService.getGridPermissions(this.oattr, this.actRoute);
+        this.actionsPermissions = this.getActionsPermissions(this.permissions);
+        this.setButtonPermissions(this.actionsPermissions);
     }
     initialize() {
         super.initialize();
@@ -16588,6 +17588,7 @@ class OGridComponent extends AbstractOServiceComponent {
         if (this.queryOnInit) {
             this.queryData();
         }
+        this.manageCustomPermissions(this.actionsPermissions, '[o-grid-toolbar]');
     }
     ngAfterContentInit() {
         this.gridItems = this.inputGridItems.toArray();
@@ -16782,7 +17783,7 @@ OGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         OntimizeServiceProvider,
         ComponentStateServiceProvider,
         { provide: O_COMPONENT_STATE_SERVICE, useClass: OGridComponentStateService },
-    ], queries: [{ propertyName: "inputGridItems", predicate: i0.forwardRef(function () { return OGridItemComponent; }) }], viewQueries: [{ propertyName: "matpaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "gridItemDirectives", predicate: OGridItemDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.display]=\"isVisible()? '' : 'none'\" class=\"o-grid-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n  <!--TOOLBAR-->\n  <o-data-toolbar *ngIf=\"hasControls()\" class=\"o-grid-toolbar\" [title]=\"title\" [show-title]=\"hasTitle()\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-grid-add-button o-grid-button text\" mat-stroked-button\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-grid-button o-grid-add-button no-text\" mat-icon-button\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button no-text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <!--O-GRID-PAGINATOR-->\n      <div class=\"o-grid-paginator\" *ngIf=\"showPageSize\">\n        <div class=\"o-grid-page-size-label\">{{ 'GRID.ITEMS_PER_PAGE' | oTranslate }}:</div>\n        <mat-form-field class=\"o-grid-select-page\">\n          <mat-select placeholder=\"\" #pageSizeSelect [(value)]=\"queryRows\" (selectionChange)=\"pageSizeChanged()\">\n            <mat-option *ngFor=\"let page of pageSizeOptions\" [value]=\"page\">\n              {{ page }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <!--O-GRID-SORT-->\n      <div class=\"o-grid-sort\" *ngIf=\"showSort && sortableColumns.length > 0\">\n        <mat-form-field class=\"o-grid-select-sort\">\n          <mat-icon matPrefix>sort</mat-icon>\n          <mat-select #sortSelect [value]=\"currentOrderColumn\" (selectionChange)=\"sortColumnChanged($event)\"\n            placeholder=\" {{ 'GRID.SORT_BY' | oTranslate }}\">\n            <mat-option *ngFor=\"let column of sortableColumns; let i = index\" [value]=\"i\">\n              {{ getSortOptionText(column) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n    </ng-container>\n    <ng-content select=\"[o-grid-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [columns]=\"quickFilterColumns\" [filter-case-sensitive]=\"filterCaseSensitive\"\n        [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\"\n        float-label=\"never\"></o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n\n  <ng-container *ngIf=\"(loading | async)===false\">\n    <!--no results-->\n    <div class=\"o-grid-no-results fill-remaining\" *ngIf=\"gridItems.length === 0\" fxLayoutAlign=\"center start\" layout-padding>\n      {{'GRID.EMPTY' | oTranslate}}\n      <ng-container *ngIf=\"quickFilter && searchInputComponent && searchInputComponent.getValue() && searchInputComponent.getValue().length > 0\">\n        {{ 'GRID.EMPTY_USING_FILTER' | oTranslate : { values: [ searchInputComponent.getValue()] } }}\n      </ng-container>\n    </div>\n\n\n    <!--MAT-GRID-LIST-->\n    <mat-grid-list [cols]=\"cols\" [gutterSize]=\"gutterSize\" [rowHeight]=\"gridItemHeight\" class=\"o-mat-grid-list fill-remaining\"\n      *ngIf=\"gridItems.length > 0\">\n      <mat-grid-tile o-grid-item *ngFor=\"let item of gridItems\" [colspan]=\"item.colspan\" [rowspan]=\"item.rowspan\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </mat-grid-tile>\n    </mat-grid-list>\n\n    <button type=\"button\" aria-label=\"Insert\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add()\"\n      class=\"o-grid-add-floatable-button\" [class.o-grid-add-bottom-floatable-button]=\"insertButtonPosition ==='bottom'\"\n      [class.o-grid-add-top-floatable-button]=\"insertButtonPosition ==='top'\">\n      <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n    </button>\n\n    <!-- GRID FOOTER -->\n    <div *ngIf=\"!paginationControls && showFooter && (loading | async)===false\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-grid-footer\">\n      <button type=\"button\" mat-button *ngIf=\"getDataArray().length < totalRecords && getDataArray().length>0\" (click)=\"loadMore()\"\n        class=\"mat-raised-button\">\n        {{ 'GRID.BUTTON_NEXT' | oTranslate }}\n      </button>\n      <span fxFlex></span>\n      <span class=\"o-grid-totals\">{{ 'GRID.TEXT_SHOWN_ITEMS' | oTranslate :{values: [getDataArray().length, totalRecords]}\n        }}</span>\n    </div>\n\n    <mat-paginator class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls && showFooter\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n      [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n  </ng-container>\n  <div *ngIf=\"loading | async\" fxLayout=\"row\" fxLayoutAlign=\"center end\" class=\"o-loading-blocker\">\n    <div fxLayoutAlign=\"center center\" [class.o-spinner-container-controls]=\"hasControls()\" class=\"o-spinner-container\">\n      <o-grid-skeleton></o-grid-skeleton>\n    </div>\n  </div>\n\n\n</div>\n", styles: [".o-grid{height:100%}.o-grid .o-grid-container{position:relative;height:100%;display:flex}.o-grid .o-grid-container .o-grid-toolbar .mat-mdc-form-field-subscript-wrapper{display:none}.o-grid .o-grid-container .o-grid-no-results{padding:16px}.o-grid .o-grid-container .o-grid-paginator,.o-grid .o-grid-container .o-grid-sort{margin-right:1em}.o-grid .o-grid-container .o-grid-paginator{display:flex}.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}.o-grid .o-grid-container .o-grid-footer,.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}.o-grid .o-grid-container .o-loading-blocker{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}.o-grid.o-grid-fixed,.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}.o-grid.o-grid-fixed .o-grid-footer,.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}.o-grid .o-grid-add-floatable-button.o-grid-add-top-floatable-button{top:66px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "directive", type: OGridItemDirective, selector: "mat-grid-tile[o-grid-item]" }, { kind: "component", type: OGridSkeletonComponent, selector: "o-grid-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "inputGridItems", predicate: i0.forwardRef(function () { return OGridItemComponent; }) }], viewQueries: [{ propertyName: "matpaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "gridItemDirectives", predicate: OGridItemDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.display]=\"isVisible()? '' : 'none'\" class=\"o-grid-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n  <!--TOOLBAR-->\n  <o-data-toolbar *ngIf=\"hasControls()\" class=\"o-grid-toolbar\" [title]=\"title\" [show-title]=\"hasTitle()\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" [disabled]=\"!enabledInsertButton\"\n          class=\"o-grid-add-button o-grid-button text\" mat-stroked-button aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-stroked-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\" *ngIf=\"refreshButton\"\n          class=\"o-grid-button text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" [disabled]=\"!enabledInsertButton\" type=\"button\"\n          class=\"o-grid-button o-grid-add-button no-text\" mat-icon-button aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\" *ngIf=\"refreshButton\"\n          class=\"o-grid-button no-text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <!--O-GRID-PAGINATOR-->\n      <div class=\"o-grid-paginator\" *ngIf=\"showPageSize\">\n        <div class=\"o-grid-page-size-label\">{{ 'GRID.ITEMS_PER_PAGE' | oTranslate }}:</div>\n        <mat-form-field class=\"o-grid-select-page\">\n          <mat-select placeholder=\"\" #pageSizeSelect [(value)]=\"queryRows\" (selectionChange)=\"pageSizeChanged()\">\n            <mat-option *ngFor=\"let page of pageSizeOptions\" [value]=\"page\">\n              {{ page }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <!--O-GRID-SORT-->\n      <div class=\"o-grid-sort\" *ngIf=\"showSort && sortableColumns.length > 0\">\n        <mat-form-field class=\"o-grid-select-sort\">\n          <mat-icon matPrefix>sort</mat-icon>\n          <mat-select #sortSelect [value]=\"currentOrderColumn\" (selectionChange)=\"sortColumnChanged($event)\"\n            placeholder=\" {{ 'GRID.SORT_BY' | oTranslate }}\">\n            <mat-option *ngFor=\"let column of sortableColumns; let i = index\" [value]=\"i\">\n              {{ getSortOptionText(column) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n    </ng-container>\n    <ng-content select=\"[o-grid-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [columns]=\"quickFilterColumns\" [filter-case-sensitive]=\"filterCaseSensitive\"\n        [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\"\n        float-label=\"never\"></o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n\n  <ng-container *ngIf=\"(loading | async)===false\">\n    <!--no results-->\n    <div class=\"o-grid-no-results fill-remaining\" *ngIf=\"gridItems.length === 0\" fxLayoutAlign=\"center start\" layout-padding>\n      {{'GRID.EMPTY' | oTranslate}}\n      <ng-container *ngIf=\"quickFilter && searchInputComponent && searchInputComponent.getValue() && searchInputComponent.getValue().length > 0\">\n        {{ 'GRID.EMPTY_USING_FILTER' | oTranslate : { values: [ searchInputComponent.getValue()] } }}\n      </ng-container>\n    </div>\n\n\n    <!--MAT-GRID-LIST-->\n    <mat-grid-list [cols]=\"cols\" [gutterSize]=\"gutterSize\" [rowHeight]=\"gridItemHeight\" class=\"o-mat-grid-list fill-remaining\"\n      *ngIf=\"gridItems.length > 0\">\n      <mat-grid-tile o-grid-item *ngFor=\"let item of gridItems\" [colspan]=\"item.colspan\" [rowspan]=\"item.rowspan\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </mat-grid-tile>\n    </mat-grid-list>\n    <button type=\"button\" aria-label=\"Insert\" *ngIf=\"insertButton && insertButtonFloatable\" [disabled]=\"!enabledInsertButton\" mat-fab (click)=\"add()\"\n      class=\"o-grid-add-floatable-button\" [class.o-grid-add-bottom-floatable-button]=\"insertButtonPosition ==='bottom'\"\n      [class.o-grid-add-top-floatable-button]=\"insertButtonPosition ==='top'\">\n      <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n    </button>\n\n    <!-- GRID FOOTER -->\n    <div *ngIf=\"!paginationControls && showFooter && (loading | async)===false\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-grid-footer\">\n      <button type=\"button\" mat-button *ngIf=\"getDataArray().length < totalRecords && getDataArray().length>0\" (click)=\"loadMore()\"\n        class=\"mat-raised-button\">\n        {{ 'GRID.BUTTON_NEXT' | oTranslate }}\n      </button>\n      <span fxFlex></span>\n      <span class=\"o-grid-totals\">{{ 'GRID.TEXT_SHOWN_ITEMS' | oTranslate :{values: [getDataArray().length, totalRecords]}\n        }}</span>\n    </div>\n\n    <mat-paginator class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls && showFooter\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n      [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n  </ng-container>\n  <div *ngIf=\"loading | async\" fxLayout=\"row\" fxLayoutAlign=\"center end\" class=\"o-loading-blocker\">\n    <div fxLayoutAlign=\"center center\" [class.o-spinner-container-controls]=\"hasControls()\" class=\"o-spinner-container\">\n      <o-grid-skeleton></o-grid-skeleton>\n    </div>\n  </div>\n\n\n</div>\n", styles: [".o-grid{height:100%}.o-grid .o-grid-container{position:relative;height:100%;display:flex}.o-grid .o-grid-container .o-grid-toolbar .mat-mdc-form-field-subscript-wrapper{display:none}.o-grid .o-grid-container .o-grid-no-results{padding:16px}.o-grid .o-grid-container .o-grid-paginator,.o-grid .o-grid-container .o-grid-sort{margin-right:1em}.o-grid .o-grid-container .o-grid-paginator{display:flex}.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}.o-grid .o-grid-container .o-grid-footer,.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}.o-grid .o-grid-container .o-loading-blocker{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}.o-grid.o-grid-fixed,.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}.o-grid.o-grid-fixed .o-grid-footer,.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}.o-grid .o-grid-add-floatable-button.o-grid-add-top-floatable-button{top:66px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "directive", type: OGridItemDirective, selector: "mat-grid-tile[o-grid-item]" }, { kind: "component", type: OGridSkeletonComponent, selector: "o-grid-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -16824,7 +17825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ], inputs: DEFAULT_INPUTS_O_GRID, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-grid]': 'true',
                         '[class.o-grid-fixed]': 'fixedHeader'
-                    }, template: "<div [style.display]=\"isVisible()? '' : 'none'\" class=\"o-grid-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n  <!--TOOLBAR-->\n  <o-data-toolbar *ngIf=\"hasControls()\" class=\"o-grid-toolbar\" [title]=\"title\" [show-title]=\"hasTitle()\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-grid-add-button o-grid-button text\" mat-stroked-button\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-grid-button o-grid-add-button no-text\" mat-icon-button\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button no-text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <!--O-GRID-PAGINATOR-->\n      <div class=\"o-grid-paginator\" *ngIf=\"showPageSize\">\n        <div class=\"o-grid-page-size-label\">{{ 'GRID.ITEMS_PER_PAGE' | oTranslate }}:</div>\n        <mat-form-field class=\"o-grid-select-page\">\n          <mat-select placeholder=\"\" #pageSizeSelect [(value)]=\"queryRows\" (selectionChange)=\"pageSizeChanged()\">\n            <mat-option *ngFor=\"let page of pageSizeOptions\" [value]=\"page\">\n              {{ page }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <!--O-GRID-SORT-->\n      <div class=\"o-grid-sort\" *ngIf=\"showSort && sortableColumns.length > 0\">\n        <mat-form-field class=\"o-grid-select-sort\">\n          <mat-icon matPrefix>sort</mat-icon>\n          <mat-select #sortSelect [value]=\"currentOrderColumn\" (selectionChange)=\"sortColumnChanged($event)\"\n            placeholder=\" {{ 'GRID.SORT_BY' | oTranslate }}\">\n            <mat-option *ngFor=\"let column of sortableColumns; let i = index\" [value]=\"i\">\n              {{ getSortOptionText(column) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n    </ng-container>\n    <ng-content select=\"[o-grid-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [columns]=\"quickFilterColumns\" [filter-case-sensitive]=\"filterCaseSensitive\"\n        [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\"\n        float-label=\"never\"></o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n\n  <ng-container *ngIf=\"(loading | async)===false\">\n    <!--no results-->\n    <div class=\"o-grid-no-results fill-remaining\" *ngIf=\"gridItems.length === 0\" fxLayoutAlign=\"center start\" layout-padding>\n      {{'GRID.EMPTY' | oTranslate}}\n      <ng-container *ngIf=\"quickFilter && searchInputComponent && searchInputComponent.getValue() && searchInputComponent.getValue().length > 0\">\n        {{ 'GRID.EMPTY_USING_FILTER' | oTranslate : { values: [ searchInputComponent.getValue()] } }}\n      </ng-container>\n    </div>\n\n\n    <!--MAT-GRID-LIST-->\n    <mat-grid-list [cols]=\"cols\" [gutterSize]=\"gutterSize\" [rowHeight]=\"gridItemHeight\" class=\"o-mat-grid-list fill-remaining\"\n      *ngIf=\"gridItems.length > 0\">\n      <mat-grid-tile o-grid-item *ngFor=\"let item of gridItems\" [colspan]=\"item.colspan\" [rowspan]=\"item.rowspan\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </mat-grid-tile>\n    </mat-grid-list>\n\n    <button type=\"button\" aria-label=\"Insert\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add()\"\n      class=\"o-grid-add-floatable-button\" [class.o-grid-add-bottom-floatable-button]=\"insertButtonPosition ==='bottom'\"\n      [class.o-grid-add-top-floatable-button]=\"insertButtonPosition ==='top'\">\n      <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n    </button>\n\n    <!-- GRID FOOTER -->\n    <div *ngIf=\"!paginationControls && showFooter && (loading | async)===false\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-grid-footer\">\n      <button type=\"button\" mat-button *ngIf=\"getDataArray().length < totalRecords && getDataArray().length>0\" (click)=\"loadMore()\"\n        class=\"mat-raised-button\">\n        {{ 'GRID.BUTTON_NEXT' | oTranslate }}\n      </button>\n      <span fxFlex></span>\n      <span class=\"o-grid-totals\">{{ 'GRID.TEXT_SHOWN_ITEMS' | oTranslate :{values: [getDataArray().length, totalRecords]}\n        }}</span>\n    </div>\n\n    <mat-paginator class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls && showFooter\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n      [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n  </ng-container>\n  <div *ngIf=\"loading | async\" fxLayout=\"row\" fxLayoutAlign=\"center end\" class=\"o-loading-blocker\">\n    <div fxLayoutAlign=\"center center\" [class.o-spinner-container-controls]=\"hasControls()\" class=\"o-spinner-container\">\n      <o-grid-skeleton></o-grid-skeleton>\n    </div>\n  </div>\n\n\n</div>\n", styles: [".o-grid{height:100%}.o-grid .o-grid-container{position:relative;height:100%;display:flex}.o-grid .o-grid-container .o-grid-toolbar .mat-mdc-form-field-subscript-wrapper{display:none}.o-grid .o-grid-container .o-grid-no-results{padding:16px}.o-grid .o-grid-container .o-grid-paginator,.o-grid .o-grid-container .o-grid-sort{margin-right:1em}.o-grid .o-grid-container .o-grid-paginator{display:flex}.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}.o-grid .o-grid-container .o-grid-footer,.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}.o-grid .o-grid-container .o-loading-blocker{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}.o-grid.o-grid-fixed,.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}.o-grid.o-grid-fixed .o-grid-footer,.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}.o-grid .o-grid-add-floatable-button.o-grid-add-top-floatable-button{top:66px}\n"] }]
+                    }, template: "<div [style.display]=\"isVisible()? '' : 'none'\" class=\"o-grid-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n  <!--TOOLBAR-->\n  <o-data-toolbar *ngIf=\"hasControls()\" class=\"o-grid-toolbar\" [title]=\"title\" [show-title]=\"hasTitle()\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" [disabled]=\"!enabledInsertButton\"\n          class=\"o-grid-add-button o-grid-button text\" mat-stroked-button aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-stroked-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\" *ngIf=\"refreshButton\"\n          class=\"o-grid-button text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" [disabled]=\"!enabledInsertButton\" type=\"button\"\n          class=\"o-grid-button o-grid-add-button no-text\" mat-icon-button aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\" *ngIf=\"refreshButton\"\n          class=\"o-grid-button no-text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <!--O-GRID-PAGINATOR-->\n      <div class=\"o-grid-paginator\" *ngIf=\"showPageSize\">\n        <div class=\"o-grid-page-size-label\">{{ 'GRID.ITEMS_PER_PAGE' | oTranslate }}:</div>\n        <mat-form-field class=\"o-grid-select-page\">\n          <mat-select placeholder=\"\" #pageSizeSelect [(value)]=\"queryRows\" (selectionChange)=\"pageSizeChanged()\">\n            <mat-option *ngFor=\"let page of pageSizeOptions\" [value]=\"page\">\n              {{ page }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <!--O-GRID-SORT-->\n      <div class=\"o-grid-sort\" *ngIf=\"showSort && sortableColumns.length > 0\">\n        <mat-form-field class=\"o-grid-select-sort\">\n          <mat-icon matPrefix>sort</mat-icon>\n          <mat-select #sortSelect [value]=\"currentOrderColumn\" (selectionChange)=\"sortColumnChanged($event)\"\n            placeholder=\" {{ 'GRID.SORT_BY' | oTranslate }}\">\n            <mat-option *ngFor=\"let column of sortableColumns; let i = index\" [value]=\"i\">\n              {{ getSortOptionText(column) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n    </ng-container>\n    <ng-content select=\"[o-grid-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [columns]=\"quickFilterColumns\" [filter-case-sensitive]=\"filterCaseSensitive\"\n        [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\"\n        float-label=\"never\"></o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n\n  <ng-container *ngIf=\"(loading | async)===false\">\n    <!--no results-->\n    <div class=\"o-grid-no-results fill-remaining\" *ngIf=\"gridItems.length === 0\" fxLayoutAlign=\"center start\" layout-padding>\n      {{'GRID.EMPTY' | oTranslate}}\n      <ng-container *ngIf=\"quickFilter && searchInputComponent && searchInputComponent.getValue() && searchInputComponent.getValue().length > 0\">\n        {{ 'GRID.EMPTY_USING_FILTER' | oTranslate : { values: [ searchInputComponent.getValue()] } }}\n      </ng-container>\n    </div>\n\n\n    <!--MAT-GRID-LIST-->\n    <mat-grid-list [cols]=\"cols\" [gutterSize]=\"gutterSize\" [rowHeight]=\"gridItemHeight\" class=\"o-mat-grid-list fill-remaining\"\n      *ngIf=\"gridItems.length > 0\">\n      <mat-grid-tile o-grid-item *ngFor=\"let item of gridItems\" [colspan]=\"item.colspan\" [rowspan]=\"item.rowspan\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </mat-grid-tile>\n    </mat-grid-list>\n    <button type=\"button\" aria-label=\"Insert\" *ngIf=\"insertButton && insertButtonFloatable\" [disabled]=\"!enabledInsertButton\" mat-fab (click)=\"add()\"\n      class=\"o-grid-add-floatable-button\" [class.o-grid-add-bottom-floatable-button]=\"insertButtonPosition ==='bottom'\"\n      [class.o-grid-add-top-floatable-button]=\"insertButtonPosition ==='top'\">\n      <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n    </button>\n\n    <!-- GRID FOOTER -->\n    <div *ngIf=\"!paginationControls && showFooter && (loading | async)===false\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-grid-footer\">\n      <button type=\"button\" mat-button *ngIf=\"getDataArray().length < totalRecords && getDataArray().length>0\" (click)=\"loadMore()\"\n        class=\"mat-raised-button\">\n        {{ 'GRID.BUTTON_NEXT' | oTranslate }}\n      </button>\n      <span fxFlex></span>\n      <span class=\"o-grid-totals\">{{ 'GRID.TEXT_SHOWN_ITEMS' | oTranslate :{values: [getDataArray().length, totalRecords]}\n        }}</span>\n    </div>\n\n    <mat-paginator class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls && showFooter\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n      [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n  </ng-container>\n  <div *ngIf=\"loading | async\" fxLayout=\"row\" fxLayoutAlign=\"center end\" class=\"o-loading-blocker\">\n    <div fxLayoutAlign=\"center center\" [class.o-spinner-container-controls]=\"hasControls()\" class=\"o-spinner-container\">\n      <o-grid-skeleton></o-grid-skeleton>\n    </div>\n  </div>\n\n\n</div>\n", styles: [".o-grid{height:100%}.o-grid .o-grid-container{position:relative;height:100%;display:flex}.o-grid .o-grid-container .o-grid-toolbar .mat-mdc-form-field-subscript-wrapper{display:none}.o-grid .o-grid-container .o-grid-no-results{padding:16px}.o-grid .o-grid-container .o-grid-paginator,.o-grid .o-grid-container .o-grid-sort{margin-right:1em}.o-grid .o-grid-container .o-grid-paginator{display:flex}.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}.o-grid .o-grid-container .o-grid-footer,.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}.o-grid .o-grid-container .o-loading-blocker{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}.o-grid.o-grid-fixed,.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}.o-grid.o-grid-fixed .o-grid-footer,.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}.o-grid .o-grid-add-floatable-button.o-grid-add-top-floatable-button{top:66px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: OFormComponent, decorators: [{
                     type: Optional
                 }, {
@@ -17445,6 +18446,9 @@ class OComboSearchComponent {
             }
         });
     }
+    resetSelectedValues() {
+        this.previousSelectedValues = [];
+    }
 }
 OComboSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OComboSearchComponent, deps: [{ token: MatSelect }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 OComboSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OComboSearchComponent, selector: "o-combo-search", host: { properties: { "class.o-combo-search": "true" } }, providers: [
@@ -17597,6 +18601,9 @@ class OComboComponent extends OFormServiceComponent {
         if (this.multiple) {
             this.setValue(this.defaultValue, options, setDirty);
             this.value.value = [];
+            if (Util.isDefined(this.comboSearch)) {
+                this.comboSearch.resetSelectedValues();
+            }
         }
         else {
             super.clearValue(options, setDirty);
@@ -17717,7 +18724,7 @@ OComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 OComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OComboComponent, selector: "o-combo", inputs: { multiple: "multiple", nullSelection: ["null-selection", "nullSelection"], multipleTriggerLabel: ["multiple-trigger-label", "multipleTriggerLabel"], searchable: "searchable", nullSelectionLabel: ["null-selection-label", "nullSelectionLabel"] }, host: { properties: { "class.o-combo": "true" } }, providers: [
         OntimizeServiceProvider,
         { provide: OFormServiceComponent, useExisting: forwardRef(() => OComboComponent) }
-    ], viewQueries: [{ propertyName: "inputModel", first: true, predicate: ["inputModel"], descendants: true }, { propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipShowDelay]=\"tooltipShowDelay\" [matTooltipHideDelay]=\"tooltipHideDelay\" [oContextMenu]=\"oContextMenu\">\n\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\"\n    [hideRequiredMarker]=\"hideRequiredMarker\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"getValue()\" #selectModel [id]=\"getAttribute()\" fxFill [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [multiple]=\"getMultiple()\" [required]=\"isRequired\" [panelClass]=\"{ 'o-combo-panel': true, 'o-combo-panel-search': searchable }\"\n      (selectionChange)=\"onSelectionChange($event)\" (closed)=\"innerOnBlur($event)\">\n      <o-combo-search *ngIf=\"searchable\" [formControl]=\"searchControl\"></o-combo-search>\n\n      <mat-select-trigger *ngIf=\"multiple && multipleTriggerLabel\">\n        {{ selectModel.selected[0] ? getFirstSelectedValue(): '' }}\n        <span *ngIf=\"!isEmpty()\">\n          {{ 'INPUT.COMBO.MESSAGE_TRIGGER' | oTranslate: { values: [getFormControl().value.length -1] } }}\n        </span>\n      </mat-select-trigger>\n\n      <mat-select-trigger *ngIf=\"!multiple && !multipleTriggerLabel\">\n        <ng-container *ngFor=\"let item of filteredDataArray\">\n          <ng-container *ngIf=\"renderer && item[valueColumn] == getValue()\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer && item[valueColumn] == getValue()\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </ng-container>\n      </mat-select-trigger>\n\n      <div class=\"o-combo-options-container\">\n        <mat-option *ngIf=\"hasNullSelection()\" [value]=\"null\">{{translate ?\n          (nullSelectionLabel|oTranslate): nullSelectionLabel}}\n        </mat-option>\n        <mat-option *ngFor=\"let item of filteredDataArray\" [value]=\"getValueColumn(item)\">\n          <ng-container *ngIf=\"renderer\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </mat-option>\n      </div>\n    </mat-select>\n\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-combo .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-combo-panel.o-combo-panel-search{height:100%}.o-combo-panel.o-combo-panel-search .o-combo-options-container{height:calc(100% - 3em);overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "component", type: OContextMenuComponent, selector: "o-context-menu", outputs: ["onShow", "onClose"] }, { kind: "component", type: OContextMenuItemComponent, selector: "o-context-menu-item", outputs: ["execute"] }, { kind: "component", type: OComboSearchComponent, selector: "o-combo-search" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputModel", first: true, predicate: ["inputModel"], descendants: true }, { propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true }, { propertyName: "comboSearch", first: true, predicate: ["comboSearch"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipShowDelay]=\"tooltipShowDelay\" [matTooltipHideDelay]=\"tooltipHideDelay\" [oContextMenu]=\"oContextMenu\">\n\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\"\n    [hideRequiredMarker]=\"hideRequiredMarker\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"getValue()\" #selectModel [id]=\"getAttribute()\" fxFill [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [multiple]=\"getMultiple()\" [required]=\"isRequired\" [panelClass]=\"{ 'o-combo-panel': true, 'o-combo-panel-search': searchable }\"\n      (selectionChange)=\"onSelectionChange($event)\" (closed)=\"innerOnBlur($event)\">\n      <o-combo-search #comboSearch *ngIf=\"searchable\" [formControl]=\"searchControl\"></o-combo-search>\n\n      <mat-select-trigger *ngIf=\"multiple && multipleTriggerLabel\">\n        {{ selectModel.selected[0] ? getFirstSelectedValue(): '' }}\n        <span *ngIf=\"!isEmpty()\">\n          {{ 'INPUT.COMBO.MESSAGE_TRIGGER' | oTranslate: { values: [getFormControl().value.length -1] } }}\n        </span>\n      </mat-select-trigger>\n\n      <mat-select-trigger *ngIf=\"!multiple && !multipleTriggerLabel\">\n        <ng-container *ngFor=\"let item of filteredDataArray\">\n          <ng-container *ngIf=\"renderer && item[valueColumn] == getValue()\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer && item[valueColumn] == getValue()\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </ng-container>\n      </mat-select-trigger>\n\n      <div class=\"o-combo-options-container\">\n        <mat-option *ngIf=\"hasNullSelection()\" [value]=\"null\">{{translate ?\n          (nullSelectionLabel|oTranslate): nullSelectionLabel}}\n        </mat-option>\n        <mat-option *ngFor=\"let item of filteredDataArray\" [value]=\"getValueColumn(item)\">\n          <ng-container *ngIf=\"renderer\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </mat-option>\n      </div>\n    </mat-select>\n\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-combo .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-combo-panel.o-combo-panel-search{height:100%}.o-combo-panel.o-combo-panel-search .o-combo-options-container{height:calc(100% - 3em);overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "component", type: OContextMenuComponent, selector: "o-context-menu", outputs: ["onShow", "onClose"] }, { kind: "component", type: OContextMenuItemComponent, selector: "o-context-menu-item", outputs: ["execute"] }, { kind: "component", type: OComboSearchComponent, selector: "o-combo-search" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -17741,7 +18748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: OFormServiceComponent, useExisting: forwardRef(() => OComboComponent) }
                     ], inputs: DEFAULT_INPUTS_O_COMBO, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-combo]': 'true'
-                    }, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipShowDelay]=\"tooltipShowDelay\" [matTooltipHideDelay]=\"tooltipHideDelay\" [oContextMenu]=\"oContextMenu\">\n\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\"\n    [hideRequiredMarker]=\"hideRequiredMarker\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"getValue()\" #selectModel [id]=\"getAttribute()\" fxFill [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [multiple]=\"getMultiple()\" [required]=\"isRequired\" [panelClass]=\"{ 'o-combo-panel': true, 'o-combo-panel-search': searchable }\"\n      (selectionChange)=\"onSelectionChange($event)\" (closed)=\"innerOnBlur($event)\">\n      <o-combo-search *ngIf=\"searchable\" [formControl]=\"searchControl\"></o-combo-search>\n\n      <mat-select-trigger *ngIf=\"multiple && multipleTriggerLabel\">\n        {{ selectModel.selected[0] ? getFirstSelectedValue(): '' }}\n        <span *ngIf=\"!isEmpty()\">\n          {{ 'INPUT.COMBO.MESSAGE_TRIGGER' | oTranslate: { values: [getFormControl().value.length -1] } }}\n        </span>\n      </mat-select-trigger>\n\n      <mat-select-trigger *ngIf=\"!multiple && !multipleTriggerLabel\">\n        <ng-container *ngFor=\"let item of filteredDataArray\">\n          <ng-container *ngIf=\"renderer && item[valueColumn] == getValue()\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer && item[valueColumn] == getValue()\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </ng-container>\n      </mat-select-trigger>\n\n      <div class=\"o-combo-options-container\">\n        <mat-option *ngIf=\"hasNullSelection()\" [value]=\"null\">{{translate ?\n          (nullSelectionLabel|oTranslate): nullSelectionLabel}}\n        </mat-option>\n        <mat-option *ngFor=\"let item of filteredDataArray\" [value]=\"getValueColumn(item)\">\n          <ng-container *ngIf=\"renderer\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </mat-option>\n      </div>\n    </mat-select>\n\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-combo .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-combo-panel.o-combo-panel-search{height:100%}.o-combo-panel.o-combo-panel-search .o-combo-options-container{height:calc(100% - 3em);overflow:auto}\n"] }]
+                    }, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipShowDelay]=\"tooltipShowDelay\" [matTooltipHideDelay]=\"tooltipHideDelay\" [oContextMenu]=\"oContextMenu\">\n\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\"\n    [hideRequiredMarker]=\"hideRequiredMarker\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"getValue()\" #selectModel [id]=\"getAttribute()\" fxFill [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [multiple]=\"getMultiple()\" [required]=\"isRequired\" [panelClass]=\"{ 'o-combo-panel': true, 'o-combo-panel-search': searchable }\"\n      (selectionChange)=\"onSelectionChange($event)\" (closed)=\"innerOnBlur($event)\">\n      <o-combo-search #comboSearch *ngIf=\"searchable\" [formControl]=\"searchControl\"></o-combo-search>\n\n      <mat-select-trigger *ngIf=\"multiple && multipleTriggerLabel\">\n        {{ selectModel.selected[0] ? getFirstSelectedValue(): '' }}\n        <span *ngIf=\"!isEmpty()\">\n          {{ 'INPUT.COMBO.MESSAGE_TRIGGER' | oTranslate: { values: [getFormControl().value.length -1] } }}\n        </span>\n      </mat-select-trigger>\n\n      <mat-select-trigger *ngIf=\"!multiple && !multipleTriggerLabel\">\n        <ng-container *ngFor=\"let item of filteredDataArray\">\n          <ng-container *ngIf=\"renderer && item[valueColumn] == getValue()\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer && item[valueColumn] == getValue()\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </ng-container>\n      </mat-select-trigger>\n\n      <div class=\"o-combo-options-container\">\n        <mat-option *ngIf=\"hasNullSelection()\" [value]=\"null\">{{translate ?\n          (nullSelectionLabel|oTranslate): nullSelectionLabel}}\n        </mat-option>\n        <mat-option *ngFor=\"let item of filteredDataArray\" [value]=\"getValueColumn(item)\">\n          <ng-container *ngIf=\"renderer\">\n            <ng-template *ngTemplateOutlet=\"renderer?.templateref; context:{ value: item }\">\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!renderer\">\n            {{ getOptionDescriptionValue(item) }}\n          </ng-container>\n        </mat-option>\n      </div>\n    </mat-select>\n\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-combo .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-combo-panel.o-combo-panel-search{height:100%}.o-combo-panel.o-combo-panel-search .o-combo-options-container{height:calc(100% - 3em);overflow:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: OFormComponent, decorators: [{
                     type: Optional
                 }, {
@@ -17753,6 +18760,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], selectModel: [{
                 type: ViewChild,
                 args: ['selectModel']
+            }], comboSearch: [{
+                type: ViewChild,
+                args: ['comboSearch', { static: false }]
             }] } });
 
 const DEFAULT_INPUTS_O_COMBO_RENDERER = [];
@@ -18736,59 +19746,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class CurrencyUtil {
-    static getCurrencyCode(language) {
-        const code = this.languageToCurrencyCode[language];
-        if (code) {
-            return code;
-        }
-        else {
-            return 'EUR';
-        }
-    }
-    static getCurrencyCodeFromSymbol(symbol) {
-        const currencyCode = Object.keys(this.currencyCodeToSymbol).find(code => this.currencyCodeToSymbol[code] === symbol);
-        return currencyCode;
-    }
-}
-CurrencyUtil.languageToCurrencyCode = {
-    'es': 'EUR',
-    'en': 'USD',
-    'pt': 'BRL',
-    'fr': 'EUR',
-    'de': 'EUR',
-    'it': 'EUR',
-    'ja': 'JPY',
-    'zh': 'CNY',
-    'ru': 'RUB',
-    'ar': 'AED',
-    'cr': 'CRC',
-    'ng': 'NGN',
-    'ph': 'PHP',
-    'pl': 'PLN',
-    'py': 'PYG',
-    'th': 'THB',
-    'ua': 'UAH',
-    'vn': 'VND',
-};
-CurrencyUtil.currencyCodeToSymbol = {
-    EUR: '€',
-    USD: '$',
-    BRL: 'R$',
-    JPY: '¥',
-    CNY: '¥',
-    RUB: '₽',
-    AED: 'د.إ',
-    CRC: '₡',
-    NGN: '₦',
-    PHP: '₱',
-    PLN: 'zł',
-    PYG: '₲',
-    THB: '฿',
-    UAH: '₴',
-    VND: '₫',
-};
-
 const DEFAULT_INPUTS_O_CURRENCY_INPUT = [
     'currencySymbol: currency-symbol',
     'currencySymbolPosition: currency-symbol-position'
@@ -18975,6 +19932,10 @@ class ODateInputComponent extends OTextInputComponent {
             this.datepicker.open();
         }
     }
+    clearValue(options, setDirty = false) {
+        super.clearValue(options, setDirty);
+        this.dateValue = void 0;
+    }
     onChangeEvent(event) {
         const isValid = event.value && event.value.isValid && event.value.isValid();
         let val = isValid ? event.value.valueOf() : event.value;
@@ -24760,13 +25721,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 const DEFAULT_INPUTS_O_RADIO = [
     'layout',
-    'labelPosition: label-position'
+    'labelPosition: label-position',
+    'labelGap: label-gap'
 ];
 class ORadioComponent extends OFormServiceComponent {
     constructor(form, elRef, injector) {
         super(form, elRef, injector);
         this.layout = 'column';
         this.labelPosition = 'after';
+        this.labelGap = '8px';
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -24803,16 +25766,16 @@ class ORadioComponent extends OFormServiceComponent {
     }
 }
 ORadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ORadioComponent, deps: [{ token: forwardRef(() => OFormComponent), optional: true }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ORadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ORadioComponent, selector: "o-radio", inputs: { layout: "layout", labelPosition: ["label-position", "labelPosition"] }, host: { properties: { "class.o-radio": "true" } }, providers: [
+ORadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ORadioComponent, selector: "o-radio", inputs: { layout: "layout", labelPosition: ["label-position", "labelPosition"], labelGap: ["label-gap", "labelGap"] }, host: { properties: { "class.o-radio": "true" } }, providers: [
         OntimizeServiceProvider
-    ], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" fxLayoutGap=\"8px\">\n      <mat-radio-button *ngFor=\"let item of dataArray\" [value]=\"getValueColumn(item)\" [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "component", type: OContextMenuComponent, selector: "o-context-menu", outputs: ["onShow", "onClose"] }, { kind: "component", type: OContextMenuItemComponent, selector: "o-context-menu-item", outputs: ["execute"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" [fxLayoutGap]=\"labelGap\">\n      <mat-radio-button *ngFor=\"let item of dataArray\" [value]=\"getValueColumn(item)\" [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "component", type: OContextMenuComponent, selector: "o-context-menu", outputs: ["onShow", "onClose"] }, { kind: "component", type: OContextMenuItemComponent, selector: "o-context-menu-item", outputs: ["execute"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ORadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-radio', inputs: DEFAULT_INPUTS_O_RADIO, providers: [
                         OntimizeServiceProvider
                     ], encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-radio]': 'true'
-                    }, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" fxLayoutGap=\"8px\">\n      <mat-radio-button *ngFor=\"let item of dataArray\" [value]=\"getValueColumn(item)\" [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"] }]
+                    }, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" [fxLayoutGap]=\"labelGap\">\n      <mat-radio-button *ngFor=\"let item of dataArray\" [value]=\"getValueColumn(item)\" [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: OFormComponent, decorators: [{
                     type: Optional
                 }, {
@@ -25293,60 +26256,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class OListComponentStateClass extends DefaultServiceComponentStateClass {
-    get sortColumns() {
-        return this['sort-columns'];
-    }
-    set sortColumns(value) {
-        this['sort-columns'] = value;
-    }
-}
-
-class OListComponentStateService extends AbstractComponentStateService {
-    initialize(component) {
-        this.state = new OListComponentStateClass();
-        super.initialize(component);
-    }
-    initializeState(state) {
-        super.initializeState(state);
-    }
-    getDataToStore() {
-        let dataToStore = Object.assign({}, this.state);
-        dataToStore['query-rows'] = this.component.queryRows;
-        if (!this.component.storePaginationState) {
-            delete dataToStore['queryRecordOffset'];
-        }
-        if (this.component.quickFilter && Util.isDefined(this.component.quickFilterComponent)) {
-            dataToStore['quickFilterActiveColumns'] = this.component.quickFilterComponent.getActiveColumns().join(Codes.ARRAY_INPUT_SEPARATOR);
-        }
-        dataToStore['filter-case-sensitive'] = this.component.isFilterCaseSensitive();
-        dataToStore.selection = this.state.selection;
-        return dataToStore;
-    }
-    refreshSelection() {
-        this.state.selection = this.getSelectionState();
-    }
-    getSelectionState() {
-        const selection = [];
-        if (this.component) {
-            const keys = this.component.getKeys();
-            this.component.getSelectedItems().forEach(item => {
-                const data = {};
-                keys.forEach(key => {
-                    data[key] = item[key];
-                });
-                selection.push(data);
-            });
-        }
-        return selection;
-    }
-}
-OListComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-OListComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListComponentStateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListComponentStateService, decorators: [{
-            type: Injectable
-        }] });
-
 class OListSkeletonComponent extends OSkeletonComponent {
     constructor(elRef, injector) {
         super(injector);
@@ -25409,7 +26318,9 @@ class OListComponent extends AbstractOServiceComponent {
     }
     ngOnInit() {
         this.initialize();
-        this.subscription.add(this.selection.changed.subscribe(() => this.enabledDeleteButton = !this.selection.isEmpty()));
+        this.permissions = this.permissionsService.getListPermissions(this.oattr, this.actRoute);
+        this.actionsPermissions = this.getActionsPermissions(this.permissions);
+        this.setButtonPermissions(this.actionsPermissions);
     }
     ngAfterViewInit() {
         super.afterViewInit();
@@ -25421,6 +26332,7 @@ class OListComponent extends AbstractOServiceComponent {
         if (this.queryOnInit) {
             this.queryData();
         }
+        this.manageCustomPermissions(this.actionsPermissions, '[o-list-toolbar]');
     }
     ngAfterContentInit() {
         this.setListItemDirectivesData();
@@ -25444,6 +26356,7 @@ class OListComponent extends AbstractOServiceComponent {
         if (!Util.isDefined(this.state.totalQueryRecordsNumber)) {
             this.state.totalQueryRecordsNumber = 0;
         }
+        this.permissions = this.permissionsService.getListPermissions(this.oattr, this.actRoute);
     }
     reinitialize(options) {
         super.reinitialize(options);
@@ -25603,7 +26516,7 @@ OListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         OntimizeServiceProvider,
         ComponentStateServiceProvider,
         { provide: O_COMPONENT_STATE_SERVICE, useClass: OListComponentStateService },
-    ], queries: [{ propertyName: "listItemDirectives", predicate: OListItemDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-list-container\" [style.display]=\"isVisible()? '' : 'none'\" fxFill>\n  <div *ngIf=\"loading | async\" fxLayoutAlign=\"center center\" [class.pageable-loading]=\"pageable && state.queryRecordOffset > 0\"\n    class=\"spinner-container\">\n    <o-list-skeleton></o-list-skeleton>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"hasTitle()\" class=\"o-list-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" class=\"o-list-button text\" type=\"button\" mat-stroked-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <button type=\"button\" mat-stroked-button class=\"o-list-button text\" aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button text\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" class=\"o-list-button no-text\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n    </ng-container>\n    <ng-content select=\"[o-list-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n        [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\" float-label=\"never\">\n      </o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n  <ng-container *ngIf=\"(loading | async) === false\">\n  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" >\n    <!--MAT-LIST-->\n    <mat-list (scroll)=\"onScroll($event)\" [class.selectable]=\"selectable\"\n      [class.o-list-item-has-buttons]=\"insertButton && (editButtonInRow || detailButtonInRow)\">\n\n      <mat-list-item *ngIf=\"!getDataArray().length\" fxLayout=\"row\" fxLayoutAlign=\"center center\" style=\"cursor: default;\">\n        <h3 matListItemTitle fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          {{ 'TABLE.EMPTY' | oTranslate }}\n          <ng-container *ngIf=\"getQuickFilterValue().length > 0\">\n            {{ 'TABLE.EMPTY_USING_FILTER' | oTranslate : {values: [getQuickFilterValue()]} }}\n          </ng-container>\n        </h3>\n      </mat-list-item>\n      <ng-content></ng-content>\n    </mat-list>\n  </div>\n  <mat-paginator fxFlex=\"0 1 auto\" class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n\n  <!--INSERT BUTTON -->\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add($event)\" class=\"add-button add-button-bottom\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n</ng-container>\n</div>\n", styles: ["::-webkit-input-placeholder{color:#8e0c39}:-moz-placeholder{color:#8e0c39;opacity:1}::-moz-placeholder{color:#8e0c39;opacity:1}:-ms-input-placeholder{color:#8e0c39}:placeholder-shown{color:#8e0c39}.o-list-container{position:relative;flex-direction:column}.o-list-container .spinner-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:500}.o-list-container .spinner-container:not(.pageable-loading){top:0}.o-list-container .spinner-container path{stroke-width:5px!important}.o-list-container .mat-mdc-list{overflow:auto}.o-list-container .mat-mdc-list .mdc-list-item--with-three-lines .o-custom-list-item{position:relative}.o-list-container .mat-mdc-list .o-custom-list-item{max-width:100%;width:100%}.o-list-container .mat-mdc-list .o-custom-list-item .o-list-item-icon{cursor:pointer;padding-right:6px}.o-list-container .mat-mdc-list.o-list-item-has-buttons .o-list-item .mat-mdc-list-item{padding-right:72px}.o-list-container .mat-mdc-list .o-list-item.mat-mdc-card{margin:6px 0;padding-bottom:16px}.o-list-container .mat-mdc-list .o-list-item .mat-mdc-list-item .mat-mdc-list-item-unscoped-content{display:flex;align-items:center}.o-list-container .add-button{right:12px;position:absolute}.o-list-container .add-button.add-button-bottom{bottom:12px}.o-list-container .add-button.add-button-top{top:88px}.o-list-container .o-mat-paginator~.add-button.add-button-bottom{bottom:68px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { 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: "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: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OListSkeletonComponent, selector: "o-list-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "listItemDirectives", predicate: OListItemDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-list-container\" [style.display]=\"isVisible()? '' : 'none'\" fxFill>\n  <div *ngIf=\"loading | async\" fxLayoutAlign=\"center center\" [class.pageable-loading]=\"pageable && state.queryRecordOffset > 0\"\n    class=\"spinner-container\">\n    <o-list-skeleton></o-list-skeleton>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"hasTitle()\" class=\"o-list-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" [disabled]=\"!enabledInsertButton\" class=\"o-list-button text\" type=\"button\" mat-stroked-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <button type=\"button\" mat-stroked-button class=\"o-list-button text\" [disabled]=\"!enabledRefreshButton\" aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button text\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" [disabled]=\"!enabledInsertButton\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" class=\"o-list-button no-text\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n    </ng-container>\n    <ng-content select=\"[o-list-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n        [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\" float-label=\"never\">\n      </o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n  <ng-container *ngIf=\"(loading | async) === false\">\n  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" >\n    <!--MAT-LIST-->\n    <mat-list (scroll)=\"onScroll($event)\" [class.selectable]=\"selectable\"\n      [class.o-list-item-has-buttons]=\"insertButton && (editButtonInRow || detailButtonInRow)\">\n\n      <mat-list-item *ngIf=\"!getDataArray().length\" fxLayout=\"row\" fxLayoutAlign=\"center center\" style=\"cursor: default;\">\n        <h3 matListItemTitle fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          {{ 'TABLE.EMPTY' | oTranslate }}\n          <ng-container *ngIf=\"getQuickFilterValue().length > 0\">\n            {{ 'TABLE.EMPTY_USING_FILTER' | oTranslate : {values: [getQuickFilterValue()]} }}\n          </ng-container>\n        </h3>\n      </mat-list-item>\n      <ng-content></ng-content>\n    </mat-list>\n  </div>\n  <mat-paginator fxFlex=\"0 1 auto\" class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n\n  <!--INSERT BUTTON -->\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add($event)\" class=\"add-button add-button-bottom\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n</ng-container>\n</div>\n", styles: ["::-webkit-input-placeholder{color:#8e0c39}:-moz-placeholder{color:#8e0c39;opacity:1}::-moz-placeholder{color:#8e0c39;opacity:1}:-ms-input-placeholder{color:#8e0c39}:placeholder-shown{color:#8e0c39}.o-list-container{position:relative;flex-direction:column}.o-list-container .spinner-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:500}.o-list-container .spinner-container:not(.pageable-loading){top:0}.o-list-container .spinner-container path{stroke-width:5px!important}.o-list-container .mat-mdc-list{overflow:auto}.o-list-container .mat-mdc-list .mdc-list-item--with-three-lines .o-custom-list-item{position:relative}.o-list-container .mat-mdc-list .o-custom-list-item{max-width:100%;width:100%}.o-list-container .mat-mdc-list .o-custom-list-item .o-list-item-icon{cursor:pointer;padding-right:6px}.o-list-container .mat-mdc-list.o-list-item-has-buttons .o-list-item .mat-mdc-list-item{padding-right:72px}.o-list-container .mat-mdc-list .o-list-item.mat-mdc-card{margin:6px 0;padding-bottom:16px}.o-list-container .mat-mdc-list .o-list-item .mat-mdc-list-item .mat-mdc-list-item-unscoped-content{display:flex;align-items:center}.o-list-container .add-button{right:12px;position:absolute}.o-list-container .add-button.add-button-bottom{bottom:12px}.o-list-container .add-button.add-button-top{top:88px}.o-list-container .o-mat-paginator~.add-button.add-button-bottom{bottom:68px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { 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: "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: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OListSkeletonComponent, selector: "o-list-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -25632,7 +26545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: O_COMPONENT_STATE_SERVICE, useClass: OListComponentStateService },
                     ], inputs: DEFAULT_INPUTS_O_LIST, outputs: DEFAULT_OUTPUTS_O_LIST, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-list]': 'true'
-                    }, template: "<div class=\"o-list-container\" [style.display]=\"isVisible()? '' : 'none'\" fxFill>\n  <div *ngIf=\"loading | async\" fxLayoutAlign=\"center center\" [class.pageable-loading]=\"pageable && state.queryRecordOffset > 0\"\n    class=\"spinner-container\">\n    <o-list-skeleton></o-list-skeleton>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"hasTitle()\" class=\"o-list-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" class=\"o-list-button text\" type=\"button\" mat-stroked-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <button type=\"button\" mat-stroked-button class=\"o-list-button text\" aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button text\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" class=\"o-list-button no-text\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n    </ng-container>\n    <ng-content select=\"[o-list-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n        [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\" float-label=\"never\">\n      </o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n  <ng-container *ngIf=\"(loading | async) === false\">\n  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" >\n    <!--MAT-LIST-->\n    <mat-list (scroll)=\"onScroll($event)\" [class.selectable]=\"selectable\"\n      [class.o-list-item-has-buttons]=\"insertButton && (editButtonInRow || detailButtonInRow)\">\n\n      <mat-list-item *ngIf=\"!getDataArray().length\" fxLayout=\"row\" fxLayoutAlign=\"center center\" style=\"cursor: default;\">\n        <h3 matListItemTitle fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          {{ 'TABLE.EMPTY' | oTranslate }}\n          <ng-container *ngIf=\"getQuickFilterValue().length > 0\">\n            {{ 'TABLE.EMPTY_USING_FILTER' | oTranslate : {values: [getQuickFilterValue()]} }}\n          </ng-container>\n        </h3>\n      </mat-list-item>\n      <ng-content></ng-content>\n    </mat-list>\n  </div>\n  <mat-paginator fxFlex=\"0 1 auto\" class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n\n  <!--INSERT BUTTON -->\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add($event)\" class=\"add-button add-button-bottom\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n</ng-container>\n</div>\n", styles: ["::-webkit-input-placeholder{color:#8e0c39}:-moz-placeholder{color:#8e0c39;opacity:1}::-moz-placeholder{color:#8e0c39;opacity:1}:-ms-input-placeholder{color:#8e0c39}:placeholder-shown{color:#8e0c39}.o-list-container{position:relative;flex-direction:column}.o-list-container .spinner-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:500}.o-list-container .spinner-container:not(.pageable-loading){top:0}.o-list-container .spinner-container path{stroke-width:5px!important}.o-list-container .mat-mdc-list{overflow:auto}.o-list-container .mat-mdc-list .mdc-list-item--with-three-lines .o-custom-list-item{position:relative}.o-list-container .mat-mdc-list .o-custom-list-item{max-width:100%;width:100%}.o-list-container .mat-mdc-list .o-custom-list-item .o-list-item-icon{cursor:pointer;padding-right:6px}.o-list-container .mat-mdc-list.o-list-item-has-buttons .o-list-item .mat-mdc-list-item{padding-right:72px}.o-list-container .mat-mdc-list .o-list-item.mat-mdc-card{margin:6px 0;padding-bottom:16px}.o-list-container .mat-mdc-list .o-list-item .mat-mdc-list-item .mat-mdc-list-item-unscoped-content{display:flex;align-items:center}.o-list-container .add-button{right:12px;position:absolute}.o-list-container .add-button.add-button-bottom{bottom:12px}.o-list-container .add-button.add-button-top{top:88px}.o-list-container .o-mat-paginator~.add-button.add-button-bottom{bottom:68px}\n"] }]
+                    }, template: "<div class=\"o-list-container\" [style.display]=\"isVisible()? '' : 'none'\" fxFill>\n  <div *ngIf=\"loading | async\" fxLayoutAlign=\"center center\" [class.pageable-loading]=\"pageable && state.queryRecordOffset > 0\"\n    class=\"spinner-container\">\n    <o-list-skeleton></o-list-skeleton>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"hasTitle()\" class=\"o-list-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" [disabled]=\"!enabledInsertButton\" class=\"o-list-button text\" type=\"button\" mat-stroked-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <button type=\"button\" mat-stroked-button class=\"o-list-button text\" [disabled]=\"!enabledRefreshButton\" aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button text\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" [disabled]=\"!enabledInsertButton\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" class=\"o-list-button no-text\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n    </ng-container>\n    <ng-content select=\"[o-list-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n        [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\" float-label=\"never\">\n      </o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n  <ng-container *ngIf=\"(loading | async) === false\">\n  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" >\n    <!--MAT-LIST-->\n    <mat-list (scroll)=\"onScroll($event)\" [class.selectable]=\"selectable\"\n      [class.o-list-item-has-buttons]=\"insertButton && (editButtonInRow || detailButtonInRow)\">\n\n      <mat-list-item *ngIf=\"!getDataArray().length\" fxLayout=\"row\" fxLayoutAlign=\"center center\" style=\"cursor: default;\">\n        <h3 matListItemTitle fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          {{ 'TABLE.EMPTY' | oTranslate }}\n          <ng-container *ngIf=\"getQuickFilterValue().length > 0\">\n            {{ 'TABLE.EMPTY_USING_FILTER' | oTranslate : {values: [getQuickFilterValue()]} }}\n          </ng-container>\n        </h3>\n      </mat-list-item>\n      <ng-content></ng-content>\n    </mat-list>\n  </div>\n  <mat-paginator fxFlex=\"0 1 auto\" class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n\n  <!--INSERT BUTTON -->\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add($event)\" class=\"add-button add-button-bottom\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n</ng-container>\n</div>\n", styles: ["::-webkit-input-placeholder{color:#8e0c39}:-moz-placeholder{color:#8e0c39;opacity:1}::-moz-placeholder{color:#8e0c39;opacity:1}:-ms-input-placeholder{color:#8e0c39}:placeholder-shown{color:#8e0c39}.o-list-container{position:relative;flex-direction:column}.o-list-container .spinner-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:500}.o-list-container .spinner-container:not(.pageable-loading){top:0}.o-list-container .spinner-container path{stroke-width:5px!important}.o-list-container .mat-mdc-list{overflow:auto}.o-list-container .mat-mdc-list .mdc-list-item--with-three-lines .o-custom-list-item{position:relative}.o-list-container .mat-mdc-list .o-custom-list-item{max-width:100%;width:100%}.o-list-container .mat-mdc-list .o-custom-list-item .o-list-item-icon{cursor:pointer;padding-right:6px}.o-list-container .mat-mdc-list.o-list-item-has-buttons .o-list-item .mat-mdc-list-item{padding-right:72px}.o-list-container .mat-mdc-list .o-list-item.mat-mdc-card{margin:6px 0;padding-bottom:16px}.o-list-container .mat-mdc-list .o-list-item .mat-mdc-list-item .mat-mdc-list-item-unscoped-content{display:flex;align-items:center}.o-list-container .add-button{right:12px;position:absolute}.o-list-container .add-button.add-button-bottom{bottom:12px}.o-list-container .add-button.add-button-top{top:88px}.o-list-container .o-mat-paginator~.add-button.add-button-bottom{bottom:68px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: OFormComponent, decorators: [{
                     type: Optional
                 }, {
@@ -25750,6 +26663,8 @@ class OListItemTextRenderer {
             if (this.secondaryText === undefined) {
                 linesNo--;
             }
+            this._listItem._innerListItem._lines = this.lines;
+            this._listItem._innerListItem._titles = this.titles;
             this._listItem._innerListItem.lines = linesNo;
             listItem.querySelector('.mat-mdc-list-item').remove();
         }
@@ -25786,14 +26701,20 @@ class OListItemTextRenderer {
     }
 }
 OListItemTextRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListItemTextRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: OListItemComponent }], target: i0.ɵɵFactoryTarget.Directive });
-OListItemTextRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: OListItemTextRenderer, inputs: { title: "title", primaryText: ["primary-text", "primaryText"], secondaryText: ["secondary-text", "secondaryText"], icon: "icon" }, outputs: { onIconClick: "icon-action" }, ngImport: i0 });
+OListItemTextRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: OListItemTextRenderer, inputs: { title: "title", primaryText: ["primary-text", "primaryText"], secondaryText: ["secondary-text", "secondaryText"], icon: "icon" }, outputs: { onIconClick: "icon-action" }, viewQueries: [{ propertyName: "titles", predicate: MatListItemTitle, descendants: true }, { propertyName: "lines", predicate: MatListItemLine, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListItemTextRenderer, decorators: [{
             type: Directive,
             args: [{
                     inputs: DEFAULT_INPUTS_O_TEXT_RENDERER,
                     outputs: DEFAULT_OUTPUTS_O_TEXT_RENDERER
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: OListItemComponent }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: OListItemComponent }]; }, propDecorators: { titles: [{
+                type: ViewChildren,
+                args: [MatListItemTitle]
+            }], lines: [{
+                type: ViewChildren,
+                args: [MatListItemLine]
+            }] } });
 
 const DEFAULT_INPUTS_O_LIST_ITEM_AVATAR = [
     'avatar',
@@ -26115,405 +27036,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class OTableComponentStateClass extends DefaultServiceComponentStateClass {
-    constructor() {
-        super(...arguments);
-        this['grouped-column-types'] = [];
-    }
-    get filterBuilderValues() {
-        return this['filter-builder-values'];
-    }
-    set filterBuilderValues(value) {
-        this['filter-builder-values'] = value;
-    }
-    get selectColumnVisible() {
-        return this['select-column-visible'];
-    }
-    set selectColumnVisible(value) {
-        this['select-column-visible'] = value;
-    }
-    get quickFilterValue() {
-        return this['filter'];
-    }
-    set quickFilterValue(value) {
-        this['filter'] = value;
-    }
-    get columnsDisplay() {
-        return this['oColumns-display'];
-    }
-    set columnsDisplay(value) {
-        this['oColumns-display'] = value;
-    }
-    getColumnDisplay(oCol) {
-        return (this.columnsDisplay || []).find(col => col.attr === oCol.attr);
-    }
-    get initialConfiguration() {
-        return this['initial-configuration'];
-    }
-    set initialConfiguration(value) {
-        this['initial-configuration'] = value;
-    }
-    get sortColumns() {
-        return this['sort-columns'];
-    }
-    set sortColumns(value) {
-        this['sort-columns'] = value;
-    }
-    get groupedColumnTypes() {
-        return this['grouped-column-types'];
-    }
-    set groupedColumnTypes(value) {
-        this['grouped-column-types'] = value;
-    }
-    get filterColumns() {
-        return this['filter-columns'];
-    }
-    set filterColumns(value) {
-        this['filter-columns'] = value;
-    }
-    get filterColumnActiveByDefault() {
-        return this['filter-column-active-by-default'];
-    }
-    get groupedColumns() {
-        return this['grouped-columns'];
-    }
-    set groupedColumns(value) {
-        this['grouped-columns'] = value;
-    }
-    get columnValueFilters() {
-        return this['column-value-filters'] || [];
-    }
-    set columnValueFilters(value) {
-        this['column-value-filters'] = value;
-    }
-    get storedFilters() {
-        return this['user-stored-filters'] || [];
-    }
-    addStoredFilter(filter) {
-        if (!Util.isDefined(this['user-stored-filters'])) {
-            this['user-stored-filters'] = [];
-        }
-        this.storedFilters.push(filter);
-    }
-    deleteStoredFilter(filterName) {
-        const index = this.storedFilters.findIndex((item) => item.name === filterName);
-        if (index >= 0) {
-            this.storedFilters.splice(index, 1);
-        }
-    }
-    getStoredFilter(filterName) {
-        let result;
-        const filter = this.storedFilters.find((item) => item.name === filterName);
-        if (filter) {
-            result = filter['stored-filter'];
-        }
-        return result;
-    }
-    applyFilter(filterName) {
-        const filter = this.getStoredFilter(filterName);
-        if (filter) {
-            this.columnValueFilters = filter['column-value-filters'];
-            this.quickFilterValue = filter['filter'];
-            this.filterCaseSensitive = filter['filter-case-sensitive'];
-            this.filterBuilderValues = filter['filter-builder-values'];
-            this.oColumns = filter['oColumns'];
-        }
-    }
-    get storedConfigurations() {
-        return this['user-stored-configurations'] || [];
-    }
-    addStoredConfiguration(configuration) {
-        if (!Util.isDefined(this['user-stored-configurations'])) {
-            this['user-stored-configurations'] = [];
-        }
-        this.storedConfigurations.push(configuration);
-    }
-    deleteStoredConfiguration(configurationName) {
-        const index = this.storedConfigurations.findIndex((item) => item.name === configurationName);
-        if (index >= 0) {
-            this.storedConfigurations.splice(index, 1);
-        }
-    }
-    getStoredConfiguration(configurationName) {
-        return this.storedConfigurations.find((item) => item.name === configurationName);
-    }
-    applyConfiguration(configurationName) {
-        const configuration = this.getStoredConfiguration(configurationName);
-        if (configuration) {
-            const properties = configuration['stored-properties'] || [];
-            const conf = configuration['stored-configuration'];
-            this.copyPropertiesFromConfiguration(properties, conf);
-        }
-    }
-    reset(pageable) {
-        const result = {
-            'user-stored-filters': this.storedFilters,
-            'user-stored-configurations': this.storedConfigurations
-        };
-        if (pageable) {
-            result['totalQueryRecordsNumber'] = this.totalQueryRecordsNumber;
-        }
-        result['currentPage'] = 0;
-        Object.assign(this, {});
-        Object.assign(this, result);
-    }
-    copyPropertiesFromConfiguration(properties, configuration) {
-        properties.forEach(property => {
-            switch (property) {
-                case 'sort-columns':
-                    this.sortColumns = configuration['sort-columns'];
-                    break;
-                case 'oColumns-display':
-                    this.columnsDisplay = configuration['oColumns-display'];
-                    this.selectColumnVisible = configuration['select-column-visible'];
-                    break;
-                case 'quick-filter':
-                case 'columns-filter':
-                    this.columnValueFilters = configuration['column-value-filters'];
-                    break;
-                case 'grouped-columns':
-                    this.groupedColumns = configuration['grouped-columns'];
-                    break;
-                case 'page':
-                    this.currentPage = configuration['currentPage'];
-                    this.totalQueryRecordsNumber = configuration['totalQueryRecordsNumber'];
-                    this.queryRecordOffset = configuration['queryRecordOffset'];
-                    this.queryRows = configuration['query-rows'];
-                    break;
-                case 'filter-builder':
-                    this.filterBuilderValues = configuration['filter-builder'];
-                    break;
-            }
-        });
-    }
-}
-
-class OTableComponentStateService extends AbstractComponentStateService {
-    initialize(component) {
-        this.state = new OTableComponentStateClass();
-        super.initialize(component);
-    }
-    initializeState(state) {
-        super.initializeState(state);
-        const initialConfigurationRawObj = state.initialConfiguration || {};
-        state.initialConfiguration = new OTableComponentStateClass();
-        state.initialConfiguration.setData(initialConfigurationRawObj);
-    }
-    refreshSelection() {
-        this.state.selection = this.getSelectionState();
-    }
-    getDataToStore() {
-        const dataToStore = {};
-        const propertiesKeys = [
-            'sort-columns',
-            'oColumns-display',
-            'columns-filter',
-            'quick-filter',
-            'page',
-            'selection',
-            'initial-configuration',
-            'filter-columns',
-            'filter-column-active',
-            'grouped-columns',
-            'grouped-column-types',
-            'user-stored-filters',
-            'user-stored-configurations'
-        ];
-        Object.assign(dataToStore, this.getTablePropertiesToStore(propertiesKeys));
-        return dataToStore;
-    }
-    storeFilter(filter) {
-        let newFilter = { name: filter.name, description: filter.description };
-        const storedFilter = {};
-        Object.assign(storedFilter, this.getColumnFiltersState());
-        Object.assign(storedFilter, this.getColumnsQuickFilterState());
-        Object.assign(storedFilter, this.getFilterBuilderState());
-        newFilter['stored-filter'] = storedFilter;
-        this.state.addStoredFilter(newFilter);
-    }
-    storeConfiguration(configurationAgs, tableProperties) {
-        const newConfiguration = {};
-        this.component.storePaginationState = true;
-        const storedConfiguration = this.getTablePropertiesToStore(tableProperties);
-        this.component.storePaginationState = false;
-        newConfiguration['stored-configuration'] = storedConfiguration;
-        Object.assign(newConfiguration, configurationAgs);
-        newConfiguration['stored-properties'] = tableProperties;
-        this.state.addStoredConfiguration(newConfiguration);
-    }
-    getTablePropertiesToStore(properties) {
-        const result = {};
-        properties.forEach(prop => {
-            Object.assign(result, this.getTablePropertyToStore(prop));
-        });
-        return result;
-    }
-    getTablePropertyToStore(property) {
-        let result = {};
-        switch (property) {
-            case 'sort-columns':
-                result = this.getSortState();
-                break;
-            case 'oColumns-display':
-                result = this.getColumnsDisplayState();
-                break;
-            case 'quick-filter':
-                result = this.getColumnsQuickFilterState();
-                break;
-            case 'columns-filter':
-                result = this.getColumnFiltersState();
-                break;
-            case 'page':
-                result = this.getPageState();
-                break;
-            case 'selection':
-                result['selection'] = this.getSelectionState();
-                break;
-            case 'initial-configuration':
-                result = this.getInitialConfigurationState();
-                break;
-            case 'filter-column-active':
-                result['filter-column-active'] = this.component.isColumnFiltersActive;
-                break;
-            case 'filter-columns':
-                result['filter-columns'] = this.component.filterColumns;
-                break;
-            case 'grouped-columns':
-                result['grouped-columns'] = this.component.groupedColumnsArray;
-                break;
-            case 'grouped-column-types':
-                result['grouped-column-types'] = this.component.groupedColumnTypes;
-                break;
-            case 'user-stored-filters':
-                result['user-stored-filters'] = this.state.storedFilters;
-                break;
-            case 'user-stored-configurations':
-                result['user-stored-configurations'] = this.state.storedConfigurations;
-                break;
-            case 'filter-builder':
-                if (this.component.filterBuilder) {
-                    result['filter-builder'] = this.component.filterBuilder.getFilterValues();
-                }
-                break;
-        }
-        return result;
-    }
-    getColumnsDisplayState() {
-        const oColumnsData = [];
-        this.component.oTableOptions.columns.forEach((oCol) => {
-            oColumnsData.push({
-                attr: oCol.attr,
-                visible: oCol.visible,
-                width: oCol.getWidthToStore()
-            });
-        });
-        return {
-            'oColumns-display': oColumnsData,
-            'select-column-visible': this.component.oTableOptions.selectColumn.visible
-        };
-    }
-    getColumnsQuickFilterState() {
-        const tableOptions = this.component.oTableOptions;
-        const oColumnsData = [];
-        tableOptions.columns.forEach((oCol) => {
-            oColumnsData.push({
-                attr: oCol.attr,
-                searchable: oCol.searchable,
-                searching: oCol.searching
-            });
-        });
-        return {
-            'oColumns': oColumnsData,
-            'filter-case-sensitive': tableOptions.filterCaseSensitive,
-            'filter': this.component.oTableQuickFilterComponent ? this.component.oTableQuickFilterComponent.value : ''
-        };
-    }
-    getFilterBuilderState() {
-        const result = {};
-        if (this.component.filterBuilder) {
-            let filterBuilder = this.component.filterBuilder.getFilterValues();
-            if (!Util.isObjectEmpty(filterBuilder)) {
-                result['filter-builder-values'] = filterBuilder;
-            }
-        }
-        return result;
-    }
-    getColumnFiltersState() {
-        const result = {};
-        if (this.component.dataSource) {
-            const columnValueFilters = this.component.dataSource.getColumnValueFilters();
-            if (columnValueFilters.length > 0) {
-                result['column-value-filters'] = columnValueFilters;
-            }
-        }
-        return result;
-    }
-    getPageState() {
-        const result = {
-            'query-rows': this.component.matpaginator ? this.component.matpaginator.pageSize : ''
-        };
-        if (this.component.currentPage > 0 && this.component.storePaginationState) {
-            result.currentPage = this.component.currentPage;
-        }
-        if (this.component.pageable && this.component.storePaginationState) {
-            result.totalQueryRecordsNumber = this.component.state.totalQueryRecordsNumber;
-            result.queryRecordOffset = Math.max((this.component.state.queryRecordOffset - this.component.dataSource.renderedData.length), (this.component.state.queryRecordOffset - this.component.queryRows));
-        }
-        return result;
-    }
-    getSelectionState() {
-        const selection = [];
-        if (this.component && this.component.keepSelectedItems) {
-            const tableKeys = this.component.getKeys();
-            this.component.getSelectedItems().forEach(item => {
-                const data = {};
-                tableKeys.forEach(key => {
-                    data[key] = item[key];
-                });
-                selection.push(data);
-            });
-        }
-        return selection;
-    }
-    getInitialConfigurationState() {
-        const oColumnsData = [];
-        Util.parseArray(this.component.visibleColumns, true).forEach((columnAttr) => {
-            let oCol = this.component.getOColumn(columnAttr);
-            oColumnsData.push({
-                attr: oCol.attr,
-                visible: true,
-                width: oCol.definition ? oCol.definition.originalWidth : undefined
-            });
-        });
-        return {
-            'initial-configuration': {
-                'oColumns-display': oColumnsData,
-                'sort-columns': this.component.sortColumns,
-                'select-column-visible': this.component.oTableOptions.selectColumn.visible,
-                'filter-case-sensitive': this.component.filterCaseSensitive,
-                'query-rows': this.component.originalQueryRows,
-                'filter-column-active-by-default': this.component.filterColumnActiveByDefault,
-                'filter-columns': this.component.originalFilterColumns,
-                'grouped-columns': this.component.originalGroupedColumnsArray
-            }
-        };
-    }
-    getSortState() {
-        const sortColumns = [];
-        this.component.sort.getSortColumns().forEach(sortData => {
-            sortColumns.push(sortData.id + Codes.COLUMNS_ALIAS_SEPARATOR + sortData.direction);
-        });
-        return {
-            'sort-columns': sortColumns.join(Codes.ARRAY_INPUT_SEPARATOR)
-        };
-    }
-}
-OTableComponentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableComponentStateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-OTableComponentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableComponentStateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableComponentStateService, decorators: [{
-            type: Injectable
-        }] });
-
 var ColumnValueFilterOperator;
 (function (ColumnValueFilterOperator) {
     ColumnValueFilterOperator[ColumnValueFilterOperator["IN"] = 0] = "IN";
@@ -27433,9 +27955,7 @@ class OTableFilterByColumnDataDialogComponent {
         let propertyA = '';
         let propertyB = '';
         [propertyA, propertyB] = [a['value'], b['value']];
-        const valueA = typeof propertyA === 'undefined' ? '' : propertyA === '' ? propertyA : isNaN(+propertyA) ? propertyA.toString().trim().toLowerCase() : +propertyA;
-        const valueB = typeof propertyB === 'undefined' ? '' : propertyB === '' ? propertyB : isNaN(+propertyB) ? propertyB.toString().trim().toLowerCase() : +propertyB;
-        return (valueA <= valueB ? -1 : 1) * (this.activeSortDirection === 'asc' ? 1 : -1);
+        return Util.sortFunction(propertyA, propertyB, this.activeSortDirection);
     }
     onSlideChange(e) {
         this.isCustomFilterSubject.next(e.checked);
@@ -30633,17 +31153,17 @@ class OTableSkeletonComponent extends OSkeletonComponent {
     }
     get count() {
         const parentElement = this.elRef.nativeElement.parentElement;
-        const parentHeight = parentElement.offsetHeight - 50;
-        return Math.floor(parentHeight / 30);
+        const parentHeight = parentElement.offsetHeight - 60;
+        return Array.from(new Array(Math.floor(parentHeight / 30)), (x, i) => i + 1);
     }
 }
 OTableSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableSkeletonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-OTableSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableSkeletonComponent, selector: "o-table-skeleton", host: { properties: { "class.o-table-skeleton": "true" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-table-skeleton-header\" fxLayoutGap=\"10px\">\n</div>\n<div class=\"o-table-skeleton-item\" fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\">\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader fxFlex count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n</div>\n\n", styles: [".o-table-skeleton{height:100%;width:100%;position:relative;padding:10px}.o-table-skeleton .o-table-skeleton-header{height:40px;margin:0 10px 10px}.o-table-skeleton .o-table-skeleton-item{margin:0 10px}\n"], dependencies: [{ 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.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.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: "component", type: i3$4.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }], encapsulation: i0.ViewEncapsulation.None });
+OTableSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableSkeletonComponent, selector: "o-table-skeleton", host: { properties: { "class.o-table-skeleton": "true" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-table-skeleton-header\" fxLayoutGap=\"10px\">\n</div>\n<div class=\"o-table-skeleton-item\" fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" *ngFor=\"let row of count\">\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader fxFlex count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n</div>\n", styles: [".o-table-skeleton{height:100%;width:100%;position:relative}.o-table-skeleton .o-table-skeleton-header{height:40px;margin:10px}.o-table-skeleton .o-table-skeleton-item{margin:5px 10px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.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: "component", type: i3$4.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-table-skeleton', encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-table-skeleton]': 'true'
-                    }, template: "<div class=\"o-table-skeleton-header\" fxLayoutGap=\"10px\">\n</div>\n<div class=\"o-table-skeleton-item\" fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\">\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader fxFlex count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"{{count}}\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n</div>\n\n", styles: [".o-table-skeleton{height:100%;width:100%;position:relative;padding:10px}.o-table-skeleton .o-table-skeleton-header{height:40px;margin:0 10px 10px}.o-table-skeleton .o-table-skeleton-item{margin:0 10px}\n"] }]
+                    }, template: "<div class=\"o-table-skeleton-header\" fxLayoutGap=\"10px\">\n</div>\n<div class=\"o-table-skeleton-item\" fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" *ngFor=\"let row of count\">\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader fxFlex count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n  <div fxFlex=\"20%\">\n    <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n      [theme]=\"{height:'20px','border-radius': '0', 'margin': '0'}\"></ngx-skeleton-loader>\n  </div>\n</div>\n", styles: [".o-table-skeleton{height:100%;width:100%;position:relative}.o-table-skeleton .o-table-skeleton-header{height:40px;margin:10px}.o-table-skeleton .o-table-skeleton-item{margin:5px 10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }]; } });
 
 class OTableRowClassPipe {
@@ -30787,7 +31307,7 @@ class OTableComponent extends AbstractOServiceComponent {
         return this._visibleColArray;
     }
     set visibleColArray(arg) {
-        const permissionsBlocked = this.permissions ? this.permissions.columns.filter(col => col.visible === false).map(col => col.attr) : [];
+        const permissionsBlocked = this.permissions && this.permissions.columns ? this.permissions.columns.filter(col => col.visible === false).map(col => col.attr) : [];
         const permissionsChecked = arg.filter(value => permissionsBlocked.indexOf(value) === -1);
         this._visibleColArray = permissionsChecked;
         if (this._oTableOptions) {
@@ -30929,18 +31449,31 @@ class OTableComponent extends AbstractOServiceComponent {
         catch (error) {
         }
         this.snackBarService = this.injector.get(SnackBarService);
-        this.getGlobalConfig();
+        this.getInjectionTokenConfig();
     }
-    getGlobalConfig() {
+    getInjectionTokenConfig() {
         try {
-            this.oTableGlobalConfig = this.injector.get(O_TABLE_GLOBAL_CONFIG);
-            if (Util.isDefined(this.oTableGlobalConfig.autoAdjust)) {
-                this.autoAdjust = this.oTableGlobalConfig.autoAdjust;
+            const oTableGlobalConfig = this.injector.get(O_TABLE_GLOBAL_CONFIG);
+            if (Util.isDefined(oTableGlobalConfig.autoAdjust)) {
+                this.autoAdjust = oTableGlobalConfig.autoAdjust;
             }
             ;
-            if (Util.isDefined(this.oTableGlobalConfig.autoAlignTitles)) {
-                this.autoAlignTitles = this.oTableGlobalConfig.autoAlignTitles;
+            if (Util.isDefined(oTableGlobalConfig.autoAlignTitles)) {
+                this.autoAlignTitles = oTableGlobalConfig.autoAlignTitles;
             }
+            if (Util.isDefined(oTableGlobalConfig.filterColumnActiveByDefault)) {
+                this.filterColumnActiveByDefault = oTableGlobalConfig.filterColumnActiveByDefault;
+            }
+            if (Util.isDefined(oTableGlobalConfig.editionMode) && Codes.isValidEditionMode(oTableGlobalConfig.editionMode)) {
+                this.editionMode = oTableGlobalConfig.editionMode;
+            }
+            if (Util.isDefined(oTableGlobalConfig.detailMode && Codes.isValidDetailMode(oTableGlobalConfig.detailMode))) {
+                this.detailMode = oTableGlobalConfig.detailMode;
+            }
+            if (Util.isDefined(oTableGlobalConfig.rowHeight) && Codes.isValidRowHeight(oTableGlobalConfig.rowHeight)) {
+                this.rowHeight = oTableGlobalConfig.rowHeight;
+            }
+            ;
         }
         catch (error) {
         }
@@ -31433,6 +31966,7 @@ class OTableComponent extends AbstractOServiceComponent {
                 this.queryRows = this.state.queryRows;
             }
         }
+        this.selection = new SelectionModel(this.isSelectionModeMultiple(), []);
     }
     updateStateExpandedColumn() {
         if (!this.tableRowExpandable || !this.tableRowExpandable.expandableColumnVisible) {
@@ -31683,6 +32217,9 @@ class OTableComponent extends AbstractOServiceComponent {
         }
         ObservableWrapper.callEmit(this.onDataLoaded, this.daoTable.data);
     }
+    canSetStaticData(staticData) {
+        return super.canSetStaticData(staticData) && Util.isDefined(this.daoTable);
+    }
     showDialogError(error, errorOptional) {
         if (Util.isDefined(error) && !Util.isObject(error)) {
             this.dialogService.alert('ERROR', error);
@@ -33052,7 +33589,7 @@ OTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         { provide: O_COMPONENT_STATE_SERVICE, useClass: OTableComponentStateService },
         { provide: VIRTUAL_SCROLL_STRATEGY, useClass: OTableVirtualScrollStrategy },
         { provide: OTableBase, useExisting: forwardRef(() => OTableComponent) }
-    ], queries: [{ propertyName: "tableRowExpandable", first: true, predicate: OTableRowExpandableComponent, descendants: true }, { propertyName: "quickfilterContentChild", first: true, predicate: ["o-table-quickfilter"], descendants: true, static: true }, { propertyName: "tableColumnSelectAllContentChild", first: true, predicate: OTableColumnSelectAllDirective, descendants: true }, { propertyName: "contextMenuContentChild", first: true, predicate: OTableContextMenuComponent, descendants: true, static: true }, { propertyName: "tableOptions", predicate: OTableOptionComponent }, { propertyName: "tableButtons", predicate: OTableButtonComponent }], viewQueries: [{ propertyName: "oMatSort", first: true, predicate: OMatSort, descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["virtualScrollViewPort"], descendants: true }, { propertyName: "spinnerContainer", first: true, predicate: ["spinnerContainer"], descendants: true, read: ElementRef }, { propertyName: "tableBodyEl", first: true, predicate: ["tableBody"], descendants: true }, { propertyName: "tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, read: ElementRef }, { propertyName: "tableToolbarEl", first: true, predicate: ["tableToolbar"], descendants: true, read: ElementRef }, { propertyName: "oTableMenu", first: true, predicate: ["tableMenu"], descendants: true }, { propertyName: "exportOptsTemplate", first: true, predicate: ["exportOptsTemplate"], descendants: true }, { propertyName: "tooltip", predicate: MatTooltip, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n      <ng-template #exportOptsTemplate>\n        <ng-content select=\"o-table-export-button\"></ng-content>\n      </ng-template>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator && (showLoading | async)===false\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': headerHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table *ngIf=\"(showLoading | async)===false\" mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(loading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "directive", type: i4$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { 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: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i14.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i14.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i18.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: OMatSort, selector: "[oMatSort]", inputs: ["oMatSortDisabled", "oMatSortColumns"], outputs: ["matSortChange"], exportAs: ["oMatSort"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OTableContextMenuComponent, selector: "o-table-context-menu", inputs: ["context-menu", "insert", "edit", "view-detail", "copy", "select-all", "refresh", "delete", "filter", "group-by-row"] }, { kind: "directive", type: OTableRowDirective, selector: "[oTableRow]" }, { kind: "directive", type: OTableExpandedFooterDirective, selector: "[oTableExpandedFooter]", inputs: ["oTableExpandedFooter", "oTableExpandedFooterColspan"] }, { kind: "component", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: ["insert-button", "refresh-button", "delete-button"] }, { kind: "component", type: OTableMenuComponent, selector: "o-table-menu", inputs: ["select-all-checkbox", "export-button", "columns-visibility-button", "show-configuration-option", "show-filter-option", "show-group-by-option", "show-reset-width-option", "show-report-on-demand-option", "show-charts-on-demand-option"] }, { kind: "component", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: ["placeholder"], outputs: ["onChange"] }, { kind: "component", type: OTableHeaderComponent, selector: "o-table-header", inputs: ["column"] }, { kind: "component", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: ["column"] }, { kind: "component", type: OTableSkeletonComponent, selector: "o-table-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }, { kind: "pipe", type: OTableRowClassPipe, name: "oTableRowClass" }], animations: [
+    ], queries: [{ propertyName: "tableRowExpandable", first: true, predicate: OTableRowExpandableComponent, descendants: true }, { propertyName: "quickfilterContentChild", first: true, predicate: ["o-table-quickfilter"], descendants: true, static: true }, { propertyName: "tableColumnSelectAllContentChild", first: true, predicate: OTableColumnSelectAllDirective, descendants: true }, { propertyName: "contextMenuContentChild", first: true, predicate: OTableContextMenuComponent, descendants: true, static: true }, { propertyName: "tableOptions", predicate: OTableOptionComponent }, { propertyName: "tableButtons", predicate: OTableButtonComponent }], viewQueries: [{ propertyName: "oMatSort", first: true, predicate: OMatSort, descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["virtualScrollViewPort"], descendants: true }, { propertyName: "spinnerContainer", first: true, predicate: ["spinnerContainer"], descendants: true, read: ElementRef }, { propertyName: "tableBodyEl", first: true, predicate: ["tableBody"], descendants: true }, { propertyName: "tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, read: ElementRef }, { propertyName: "tableToolbarEl", first: true, predicate: ["tableToolbar"], descendants: true, read: ElementRef }, { propertyName: "oTableMenu", first: true, predicate: ["tableMenu"], descendants: true }, { propertyName: "exportOptsTemplate", first: true, predicate: ["exportOptsTemplate"], descendants: true }, { propertyName: "tooltip", predicate: MatTooltip, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n      <ng-template #exportOptsTemplate>\n        <ng-content select=\"o-table-export-button\"></ng-content>\n      </ng-template>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator && (showLoading | async)===false\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': headerHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table *ngIf=\"(showLoading | async)===false\" mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(loading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "directive", type: i4$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { 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: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i14.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i14.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i18.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: OMatSort, selector: "[oMatSort]", inputs: ["oMatSortDisabled", "oMatSortColumns"], outputs: ["matSortChange"], exportAs: ["oMatSort"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OTableContextMenuComponent, selector: "o-table-context-menu", inputs: ["context-menu", "insert", "edit", "view-detail", "copy", "select-all", "refresh", "delete", "filter", "group-by-row"] }, { kind: "directive", type: OTableRowDirective, selector: "[oTableRow]" }, { kind: "directive", type: OTableExpandedFooterDirective, selector: "[oTableExpandedFooter]", inputs: ["oTableExpandedFooter", "oTableExpandedFooterColspan"] }, { kind: "component", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: ["insert-button", "refresh-button", "delete-button"] }, { kind: "component", type: OTableMenuComponent, selector: "o-table-menu", inputs: ["select-all-checkbox", "export-button", "columns-visibility-button", "show-configuration-option", "show-filter-option", "show-group-by-option", "show-reset-width-option", "show-report-on-demand-option", "show-charts-on-demand-option"] }, { kind: "component", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: ["placeholder"], outputs: ["onChange"] }, { kind: "component", type: OTableHeaderComponent, selector: "o-table-header", inputs: ["column"] }, { kind: "component", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: ["column"] }, { kind: "component", type: OTableSkeletonComponent, selector: "o-table-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }, { kind: "pipe", type: OTableRowClassPipe, name: "oTableRowClass" }], animations: [
         trigger('detailExpand', [
             state('collapsed', style({ height: '0px', minHeight: '0' })),
             state('expanded', style({ height: '*' })),
@@ -33193,7 +33730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         '[class.o-table-fixed]': 'fixedHeader',
                         '[class.o-table-disabled]': '!enabled',
                         '(document:click)': 'handleDOMClick($event)'
-                    }, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n      <ng-template #exportOptsTemplate>\n        <ng-content select=\"o-table-export-button\"></ng-content>\n      </ng-template>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator && (showLoading | async)===false\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': headerHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table *ngIf=\"(showLoading | async)===false\" mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(loading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"] }]
+                    }, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n      <ng-template #exportOptsTemplate>\n        <ng-content select=\"o-table-export-button\"></ng-content>\n      </ng-template>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator && (showLoading | async)===false\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': headerHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table *ngIf=\"(showLoading | async)===false\" mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(loading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: OFormComponent, decorators: [{
                     type: Optional
                 }, {
@@ -33978,7 +34515,7 @@ class OTableCellEditorRealComponent extends OTableCellEditorIntegerComponent {
     }
     getCellData() {
         const cellData = super.getCellData();
-        const floatValue = parseFloat(cellData.toString());
+        const floatValue = parseFloat(cellData?.toString());
         return isNaN(floatValue) ? undefined : floatValue;
     }
     resolveValidators() {
@@ -36410,97 +36947,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }] });
 
-class OTranslateHttpLoader extends TranslateHttpLoader {
-    constructor(httpClient, prefix = OTranslateService.ASSETS_PATH, suffix = OTranslateService.ASSETS_EXTENSION, injector) {
-        super(httpClient, prefix, suffix);
-        this.injector = injector;
-        this.appConfig = this.injector.get(AppConfig);
-        this.httpClient = httpClient;
-    }
-    getAssetsPath() {
-        return this.prefix;
-    }
-    getAssetsExtension() {
-        return this.suffix;
-    }
-    getLocalTranslation(lang) {
-        let innerObserver;
-        const dataObservable = new Observable(observer => innerObserver = observer).pipe(share());
-        super.getTranslation(lang)
-            .subscribe((res) => {
-            innerObserver.next(res);
-            innerObserver.complete();
-        }, error => {
-            innerObserver.next(undefined);
-        }, () => innerObserver.complete());
-        return dataObservable;
-    }
-    getTranslation(lang) {
-        const translationOrigins = [];
-        translationOrigins.push(this.getLocalTranslation(lang));
-        if (this.appConfig.useRemoteBundle()) {
-            translationOrigins.push(this.getRemoteBundle(lang));
-        }
-        let innerObserver;
-        const dataObservable = new Observable(observer => innerObserver = observer).pipe(share());
-        combineLatest(translationOrigins).subscribe((res) => {
-            const staticBundle = res[0] || {};
-            const remoteBundle = res[1] || {};
-            const allBundles = Object.assign(staticBundle, remoteBundle);
-            innerObserver.next(allBundles);
-        });
-        return dataObservable;
-    }
-    getRemoteBundle(lang) {
-        const bundleEndpoint = this.appConfig.getBundleEndpoint();
-        if (!bundleEndpoint) {
-            return of([]);
-        }
-        const url = bundleEndpoint + '?lang=' + lang;
-        return this.httpClient.get(url).pipe(map((resp) => {
-            if (resp.code === Codes.ONTIMIZE_SUCCESSFUL_CODE) {
-                return this.parseBundleResponse(resp.data);
-            }
-            return resp;
-        }), catchError(err => {
-            console.log('Remote Bundle service is not available', err);
-            return of([]);
-        }));
-    }
-    parseBundleResponse(data) {
-        const result = {};
-        if (data) {
-            data.forEach((item) => {
-                result[item[OTranslateHttpLoader.BUNDLE_KEY]] = item[OTranslateHttpLoader.BUNDLE_VALUE];
-            });
-        }
-        return result;
-    }
-}
-OTranslateHttpLoader.BUNDLE_KEY = 'key';
-OTranslateHttpLoader.BUNDLE_VALUE = 'value';
-
-class OTranslateParser extends TranslateDefaultParser {
-    constructor() {
-        super(...arguments);
-        this.templateMatcher = /{\s?([0-9][^{}\s]*)\s?}/g;
-    }
-    interpolate(expr, params) {
-        if (typeof expr !== 'string' || !params) {
-            return expr;
-        }
-        return expr.replace(this.templateMatcher, (substring, index) => {
-            const argValue = Util.isDefined(params[index]) ? params[index] : '';
-            return !isNaN(parseInt(index, 10)) ? argValue : substring;
-        });
-    }
-}
-OTranslateParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTranslateParser, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-OTranslateParser.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTranslateParser });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTranslateParser, decorators: [{
-            type: Injectable
-        }] });
-
 class OTreeDataSource {
     get data() {
         return this.dataChange.value;
@@ -36742,6 +37188,9 @@ class OTreeComponent extends AbstractOServiceComponent {
         this.initialize();
         this.initializeParams();
         this.subscription.add(this.selection.changed.subscribe(() => (this.enabledDeleteButton = !this.selection.isEmpty())));
+        this.permissions = this.permissionsService.getTreePermissions(this.oattr, this.actRoute);
+        this.actionsPermissions = this.getActionsPermissions(this.permissions);
+        this.setButtonPermissions(this.actionsPermissions);
     }
     initialize() {
         super.initialize();
@@ -36773,6 +37222,7 @@ class OTreeComponent extends AbstractOServiceComponent {
         if (this.queryOnInit) {
             this.queryData();
         }
+        this.manageCustomPermissions(this.actionsPermissions, '[o-tree-button]');
     }
     ngOnDestroy() {
         this.destroy();
@@ -37055,7 +37505,7 @@ class OTreeComponent extends AbstractOServiceComponent {
     }
 }
 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\" (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\" (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\" (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\" (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], 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)
@@ -37084,7 +37534,7 @@ 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\" (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\" (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\" (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\" (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], 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
                 }, {
@@ -37160,31 +37610,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class OUserInfoService {
-    constructor(injector) {
-        this.injector = injector;
-        this.subject = new Subject();
-    }
-    setUserInfo(info) {
-        this.storedInfo = info;
-        this.subject.next(info);
-    }
-    getUserInfo() {
-        return this.storedInfo;
-    }
-    getUserInfoObservable() {
-        return this.subject.asObservable();
-    }
-}
-OUserInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OUserInfoService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-OUserInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OUserInfoService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OUserInfoService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
 const DEFAULT_INPUTS_O_USER_INFO = [
     'showProfile: show-profile',
     'showSettings: show-settings',
@@ -37259,155 +37684,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }, template: "<div class=\"o-user-info-container\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n  <ng-container *ngIf=\"existsUserInfo\">\n    <div class=\"o-user-info-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"center center\" [matMenuTriggerFor]=\"menu\"\n      fxLayoutGap=\"16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-user-info-avatar-wrapper\">\n        <img [src]=\"avatar\" *ngIf=\"avatar\" alt=\"avatar image\"/>\n      </div>\n      <span class=\"o-user-info-username\" *ngIf=\"username\"> {{ username }}</span>\n      <mat-icon svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n    </div>\n    <mat-menu #menu=\"matMenu\" yPosition=\"below\" class=\"o-mat-menu\">\n      <button type=\"button\" mat-menu-item (click)=\"onProfileClick()\" *ngIf=\"showProfile\">\n        <mat-icon>person</mat-icon>\n        <span>{{ 'APP_LAYOUT.USER_PROFILE' | oTranslate }}</span>\n      </button>\n      <button type=\"button\" mat-menu-item (click)=\"onSettingsClick()\" *ngIf=\"showSettings\">\n        <mat-icon svgIcon=\"ontimize:settings\"></mat-icon>\n        <span>{{ 'APP_LAYOUT.SETTINGS' | oTranslate }}</span>\n      </button>\n      <ng-container *ngIf=\"userInfoConfiguration\">\n        <button *ngFor=\"let item of userInfoConfiguration.userInfoConfigurationItems\" type=\"button\" mat-menu-item\n          [matTooltip]=\"item.name | oTranslate\" matTooltipDisabled=\"item.tooltip\" [ngClass]=\"item.class\"\n          (click)=\"item.triggerOnClick($event)\">\n          <mat-icon>{{item.icon}} </mat-icon>\n          <span>{{ item.name | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <button type=\"button\" mat-menu-item (click)=\"onLogoutClick()\" *ngIf=\"showLogout\">\n        <mat-icon svgIcon=\"ontimize:power_settings_new\"></mat-icon>\n        <span>{{ 'LOGOUT' | oTranslate }}</span>\n      </button>\n\n    </mat-menu>\n  </ng-container>\n</div>", styles: [".o-user-info .o-user-info-container{cursor:pointer;height:100%}.o-user-info .o-user-info-avatar-wrapper{width:30px;height:30px;overflow:hidden;border-radius:100%}.o-user-info .o-user-info-avatar-wrapper img{max-width:100%;height:auto}.o-user-info mat-icon{font-size:16px;line-height:26px;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1.Router }]; }, propDecorators: { showLogout: [], showSettings: [], showProfile: [] } });
 
-class AppConfigFactory {
-    constructor(injector) {
-        this.injector = injector;
-        this.config = this.injector.get(APP_CONFIG);
-    }
-    factory() {
-        return new AppConfig(this.config);
-    }
-}
-function appConfigFactory(injector) {
-    return new AppConfigFactory(injector).factory();
-}
-
-class AuthGuardService {
-    constructor(injector) {
-        this.injector = injector;
-        this.router = this.injector.get(Router);
-        this.authService = this.injector.get(AuthService);
-        this.oUserInfoService = this.injector.get(OUserInfoService);
-        this.permissionsService = this.injector.get(PermissionsService);
-    }
-    canActivate(next, state) {
-        const isLoggedIn = this.authService.isLoggedIn();
-        let result = isLoggedIn;
-        if (!isLoggedIn) {
-            this.permissionsService.restart();
-            this.router.navigate([Codes.LOGIN_ROUTE]);
-        }
-        if (isLoggedIn) {
-            this.setUserInformation();
-            if (!this.permissionsService.hasPermissions()) {
-                result = this.permissionsService.getUserPermissionsAsPromise();
-            }
-        }
-        return result;
-    }
-    setUserInformation() {
-        const sessionInfo = this.authService.getSessionInfo();
-        this.oUserInfoService.setUserInfo({
-            username: sessionInfo.user,
-            avatar: './assets/images/user_profile.png'
-        });
-    }
-}
-AuthGuardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuardService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-AuthGuardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuardService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuardService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
-class OModulesInfoService {
-    constructor(injector, router) {
-        this.injector = injector;
-        this.router = router;
-        this.subject = new ReplaySubject();
-        this.router = this.injector.get(Router);
-    }
-    getModuleChangeObservable() {
-        this.router.events
-            .pipe(filter(e => e instanceof NavigationEnd), map(() => {
-            let route = this.router.routerState.root;
-            let routeTitle = '';
-            while (route.firstChild) {
-                route = route.firstChild;
-            }
-            if (route.snapshot.data['oAppHeaderTitle']) {
-                routeTitle = route.snapshot.data['oAppHeaderTitle'];
-            }
-            return routeTitle;
-        }))
-            .subscribe((title) => {
-            if (title) {
-                this.subject.next(title);
-            }
-            else {
-                this.subject.next("");
-            }
-        });
-        return this.subject.asObservable();
-    }
-}
-OModulesInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OModulesInfoService, deps: [{ token: i0.Injector }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-OModulesInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OModulesInfoService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OModulesInfoService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }]; } });
-
-class PermissionsGuardService {
-    constructor(injector) {
-        this.injector = injector;
-        this.router = this.injector.get(Router);
-        this.permissionsService = this.injector.get(PermissionsService);
-        this.snackBarService = this.injector.get(SnackBarService);
-        this.shareCanActivateChildService = this.injector.get(ShareCanActivateChildService);
-        this.shareCanActivateChildService.setPermissionsGuard(this);
-    }
-    canActivateChild(childRoute, state) {
-        let restricted = false;
-        const oPermission = childRoute.data ? childRoute.data['oPermission'] : undefined;
-        const permissionId = (oPermission || {})['permissionId'];
-        if (Util.isDefined(permissionId)) {
-            restricted = this.permissionsService.isPermissionIdRouteRestricted(permissionId);
-            if (restricted) {
-                let msg = 'MESSAGES.NAVIGATION_NOT_ALLOWED_PERMISSION';
-                const route = oPermission['restrictedPermissionsRedirect'];
-                if (Util.isDefined(route)) {
-                    msg = 'MESSAGES.NAVIGATION_REDIRECTED_PERMISSION';
-                    this.router.navigate([route]);
-                }
-                this.snackBarService.open(msg);
-            }
-        }
-        return !restricted;
-    }
-}
-PermissionsGuardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionsGuardService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-PermissionsGuardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionsGuardService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionsGuardService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
-function getPermissionsServiceProvider(injector) {
-    return new PermissionsService(injector);
-}
-class OPermissionsModule {
-}
-OPermissionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-OPermissionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, imports: [CommonModule] });
-OPermissionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, providers: [
-        { provide: PermissionsGuardService, useClass: PermissionsGuardService },
-        { provide: OntimizePermissionsService, useFactory: permissionsServiceFactory, deps: [Injector] }
-    ], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OPermissionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    providers: [
-                        { provide: PermissionsGuardService, useClass: PermissionsGuardService },
-                        { provide: OntimizePermissionsService, useFactory: permissionsServiceFactory, deps: [Injector] }
-                    ]
-                }]
-        }] });
-
 const DEFAULT_INPUTS_O_USER_INFO_MENU_ITEM = [
     'name',
     'route',
@@ -38018,7 +38294,7 @@ class OAppSidenavMenuGroupComponent {
     }
 }
 OAppSidenavMenuGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppSidenavMenuGroupComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OAppSidenavMenuGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: { menuGroup: ["menu-group", "menuGroup"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], level: "level" }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\" [menu-item]=\"menuItem\"\n          [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n        </o-app-sidenav-menu-item>\n        <ng-template #menuGroup>\n          <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-group>\n        </ng-template>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], animations: [
+OAppSidenavMenuGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: { menuGroup: ["menu-group", "menuGroup"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], level: "level" }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <ng-container *ngIf=\"appMenuService.isVisible(menuItem)\">\n          <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\"\n            [menu-item]=\"menuItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-item>\n          <ng-template #menuGroup>\n            <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n              *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n            </o-app-sidenav-menu-group>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], animations: [
         trigger('contentExpansion', [
             state('collapsed', style({ height: '0px' })),
             state('expanded', style({ height: '*' })),
@@ -38046,7 +38322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'getClass()',
                         '[attr.disabled]': 'disabled'
-                    }, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\" [menu-item]=\"menuItem\"\n          [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n        </o-app-sidenav-menu-item>\n        <ng-template #menuGroup>\n          <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-group>\n        </ng-template>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <ng-container *ngIf=\"appMenuService.isVisible(menuItem)\">\n          <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\"\n            [menu-item]=\"menuItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-item>\n          <ng-template #menuGroup>\n            <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n              *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n            </o-app-sidenav-menu-group>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sidenavOpened: [], level: [] } });
 
 const DEFAULT_INPUTS_O_APP_SIDENAV = [
@@ -38072,7 +38348,7 @@ class OAppSidenavComponent {
         this.elRef = elRef;
         this.cd = cd;
         this.media = media;
-        this._menuRootArray = [];
+        this.menuRootArray = [];
         this._layoutMode = Codes.APP_LAYOUT_MODE_DESKTOP;
         this.opened = true;
         this._showUserInfo = true;
@@ -38085,6 +38361,7 @@ class OAppSidenavComponent {
         this.manuallyClosed = false;
         this.appMenuService = this.injector.get(AppMenuService);
         this.menuRootArray = this.appMenuService.getMenuRoots();
+        this.permissionSubscription = this.appMenuService.onPermissionMenuChanged.subscribe(() => this.refreshMenuRoots());
         this.oUserInfoService = this.injector.get(OUserInfoService);
         const self = this;
         this.mediaWatch = this.media.asObservable().subscribe(() => {
@@ -38093,6 +38370,10 @@ class OAppSidenavComponent {
             }
         });
     }
+    refreshMenuRoots() {
+        this.menuRootArray = [...this.appMenuService.getMenuRoots()];
+        this.cd.detectChanges();
+    }
     onResize() {
         if (!this.manuallyClosed && !this.isScreenSmall() && !this.isMobileMode()) {
             this.sidenav.open();
@@ -38110,10 +38391,10 @@ class OAppSidenavComponent {
             this.userInfo = this.oUserInfoService.getUserInfo();
             this.userInfoSubscription = this.oUserInfoService.getUserInfoObservable().subscribe(res => {
                 this.userInfo = res;
-                this.refreshMenuRoots();
+                this.refreshMenuItemUserInfo();
             });
         }
-        this.refreshMenuRoots();
+        this.refreshMenuItemUserInfo();
     }
     get layoutMode() {
         return this._layoutMode;
@@ -38133,7 +38414,7 @@ class OAppSidenavComponent {
             this._sidenavMode = m;
         }
     }
-    refreshMenuRoots() {
+    refreshMenuItemUserInfo() {
         if (this.showUserInfo && this.userInfo && this._showToggleButton) {
             const firstRoot = this.menuRootArray[0];
             const alreadyExistsUserInfo = firstRoot ? firstRoot.id === 'user-info' : false;
@@ -38169,6 +38450,9 @@ class OAppSidenavComponent {
         if (this.userInfoSubscription) {
             this.userInfoSubscription.unsubscribe();
         }
+        if (this.permissionSubscription) {
+            this.permissionSubscription.unsubscribe();
+        }
     }
     isScreenSmall() {
         return !this.manuallyClosed && this.media.isActive('lt-sm');
@@ -38182,12 +38466,6 @@ class OAppSidenavComponent {
     isSidenavOpened() {
         return this.opened && !this.isMobileMode() && !this.isScreenSmall();
     }
-    get menuRootArray() {
-        return this._menuRootArray;
-    }
-    set menuRootArray(val) {
-        this._menuRootArray = val;
-    }
     toggleSidenav() {
         const promise = this.sidenav.opened ? this.sidenav.close() : this.sidenav.open();
         const self = this;
@@ -38229,7 +38507,7 @@ class OAppSidenavComponent {
 OAppSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppSidenavComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$2.MediaObserver }], target: i0.ɵɵFactoryTarget.Component });
 OAppSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavComponent, selector: "o-app-sidenav", inputs: { opened: "opened", showUserInfo: ["show-user-info", "showUserInfo"], showToggleButton: ["show-toggle-button", "showToggleButton"], openedSidenavImg: ["opened-sidenav-image", "openedSidenavImg"], closedSidenavImg: ["closed-sidenav-image", "closedSidenavImg"], layoutMode: ["layout-mode", "layoutMode"], sidenavMode: ["sidenav-mode", "sidenavMode"] }, outputs: { onSidenavOpenedChange: "onSidenavOpenedChange", onSidenavOpenedStart: "onSidenavOpenedStart", onSidenavClosedStart: "onSidenavClosedStart", onSidenavToggle: "onSidenavToggle", afterSidenavToggle: "afterSidenavToggle" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.o-app-sidenav": "true" } }, providers: [
         { provide: OAppSidenavBase, useExisting: forwardRef(() => OAppSidenavComponent) }
-    ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true }], ngImport: i0, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group'\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group'\" (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavImageComponent, selector: "o-app-sidenav-image", inputs: ["opened-src", "closed-src"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true }], ngImport: i0, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group' && appMenuService.isVisible(menuRootItem)\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group' && appMenuService.isVisible(menuRootItem)\"\n            (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavImageComponent, selector: "o-app-sidenav-image", inputs: ["opened-src", "closed-src"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -38240,7 +38518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         '[class.o-app-sidenav]': 'true'
                     }, providers: [
                         { provide: OAppSidenavBase, useExisting: forwardRef(() => OAppSidenavComponent) }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group'\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group'\" (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group' && appMenuService.isVisible(menuRootItem)\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group' && appMenuService.isVisible(menuRootItem)\"\n            (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$2.MediaObserver }]; }, propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: [MatSidenav]
@@ -39079,5 +39357,5 @@ function ontimizePostBootstrap(ngModuleRef) {
 class ODialogConfig {
 }
 
-export { APP_CONFIG, AbstractComponentStateClass, AbstractComponentStateService, AbstractOServiceBaseComponent, AbstractOServiceComponent, AbstractServiceComponentStateClass, AppConfig, AppConfigFactory, AppMenuService, AppearanceService, AuthGuardService, AuthService, Base64, BaseService, BaseServiceResponse, BooleanConverter, BooleanInputConverter, CKEditorComponent, CKEditorModule, CanActivateFormLayoutChildGuard, CanDeactivateFormGuard, Codes, ColumnValueFilterOperator, ColumnsFilterPipe, ComponentStateServiceProvider, CurrencyService, CurrencyUtil, DEFAULT_CONTEXT_MENU_CONTENT_INPUTS, DEFAULT_CONTEXT_MENU_CONTENT_ITEM_INPUTS, DEFAULT_CONTEXT_MENU_CONTENT_OUTPUTS, DEFAULT_CONTEXT_MENU_DIRECTIVE_INPUTS, DEFAULT_CONTEXT_MENU_ITEM_INPUTS, DEFAULT_CONTEXT_MENU_ITEM_OUTPUTS, DEFAULT_DUAL_LIST_SELECTOR, DEFAULT_DUAL_LIST_SELECTOR_DATE_ITEM, DEFAULT_INPUTS_O_APP_HEADER, DEFAULT_INPUTS_O_APP_LAYOUT, DEFAULT_INPUTS_O_APP_LAYOUT_HEADER, DEFAULT_INPUTS_O_APP_LAYOUT_SIDENAV, DEFAULT_INPUTS_O_APP_SIDENAV, DEFAULT_INPUTS_O_APP_SIDENAV_IMAGE, DEFAULT_INPUTS_O_APP_SIDENAV_MENU_GROUP, DEFAULT_INPUTS_O_APP_SIDENAV_MENU_ITEM, DEFAULT_INPUTS_O_BAR_MENU, DEFAULT_INPUTS_O_BAR_MENU_ITEM, DEFAULT_INPUTS_O_BAR_MENU_NESTED, DEFAULT_INPUTS_O_BASE_MENU_ITEM, DEFAULT_INPUTS_O_BASE_TABLE_CELL_RENDERER, DEFAULT_INPUTS_O_BREADCRUMB, DEFAULT_INPUTS_O_BUTTON, DEFAULT_INPUTS_O_BUTTON_TOGGLE, DEFAULT_INPUTS_O_BUTTON_TOGGLE_GROUP, DEFAULT_INPUTS_O_CARD_RENDERER, DEFAULT_INPUTS_O_CHECKBOX, DEFAULT_INPUTS_O_COMBO, DEFAULT_INPUTS_O_COMBO_RENDERER, DEFAULT_INPUTS_O_COMBO_RENDERER_BOOLEAN, DEFAULT_INPUTS_O_COMBO_RENDERER_CURRENCY, DEFAULT_INPUTS_O_COMBO_RENDERER_DATE, DEFAULT_INPUTS_O_COMBO_RENDERER_ICON, DEFAULT_INPUTS_O_COMBO_RENDERER_INTEGER, DEFAULT_INPUTS_O_COMBO_RENDERER_PERCENTAGE, DEFAULT_INPUTS_O_COMBO_RENDERER_REAL, DEFAULT_INPUTS_O_CONTAINER, DEFAULT_INPUTS_O_CONTAINER_COLLAPSIBLE, DEFAULT_INPUTS_O_CONTEXT_MENU_ITEMS, DEFAULT_INPUTS_O_CURRENCY_INPUT, DEFAULT_INPUTS_O_DATA_TOOLBAR, DEFAULT_INPUTS_O_DATERANGE_INPUT, DEFAULT_INPUTS_O_DATE_INPUT, DEFAULT_INPUTS_O_ERROR, DEFAULT_INPUTS_O_FILE_INPUT, DEFAULT_INPUTS_O_FILTER_BUILDER, DEFAULT_INPUTS_O_FILTER_BUILDER_MENU, DEFAULT_INPUTS_O_FORM, DEFAULT_INPUTS_O_FORM_CONTAINER, DEFAULT_INPUTS_O_FORM_DATA_COMPONENT, DEFAULT_INPUTS_O_FORM_LAYOUT_MANAGER, DEFAULT_INPUTS_O_FORM_LAYOUT_SPLIT_PANE, DEFAULT_INPUTS_O_FORM_LAYOUT_TABGROUP, DEFAULT_INPUTS_O_FORM_SERVICE_COMPONENT, DEFAULT_INPUTS_O_FORM_TOOLBAR, DEFAULT_INPUTS_O_GRID, DEFAULT_INPUTS_O_GRID_ITEM, DEFAULT_INPUTS_O_HOUR_INPUT, DEFAULT_INPUTS_O_HTML_INPUT, DEFAULT_INPUTS_O_IMAGE, DEFAULT_INPUTS_O_INTEGER_INPUT, DEFAULT_INPUTS_O_LANGUAGE_SELECTOR, DEFAULT_INPUTS_O_LIST, DEFAULT_INPUTS_O_LISTPICKER_RENDERER, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_CURRENCY, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_DATE, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_INTEGER, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_PERCENTAGE, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_REAL, DEFAULT_INPUTS_O_LIST_ITEM_AVATAR, DEFAULT_INPUTS_O_LIST_ITEM_CARD_IMAGE, DEFAULT_INPUTS_O_LIST_ITEM_TEXT, DEFAULT_INPUTS_O_LIST_PICKER, DEFAULT_INPUTS_O_LIST_PICKER_DIALOG, DEFAULT_INPUTS_O_LOCALE_BAR_MENU_ITEM, DEFAULT_INPUTS_O_LOCKER, DEFAULT_INPUTS_O_MENU_CARD, DEFAULT_INPUTS_O_MENU_LAYOUT, DEFAULT_INPUTS_O_PASSWORD_INPUT, DEFAULT_INPUTS_O_PERCENT_INPUT, DEFAULT_INPUTS_O_PHONE_INPUT, DEFAULT_INPUTS_O_RADIO, DEFAULT_INPUTS_O_REAL_INPUT, DEFAULT_INPUTS_O_SEARCH_INPUT, DEFAULT_INPUTS_O_SERVICE_BASE_COMPONENT, DEFAULT_INPUTS_O_SERVICE_COMPONENT, DEFAULT_INPUTS_O_SLIDER_INPUT, DEFAULT_INPUTS_O_SLIDETOGGLE, DEFAULT_INPUTS_O_TABLE, DEFAULT_INPUTS_O_TABLE_BUTTON, DEFAULT_INPUTS_O_TABLE_BUTTONS, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_BOOLEAN, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_DATE, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_INTEGER, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_TIME, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_ACTION, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_BOOLEAN, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_CURRENCY, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_DATE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_IMAGE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_INTEGER, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_PERCENTAGE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_REAL, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_SERVICE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_TIME, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_TRANSLATE, DEFAULT_INPUTS_O_TABLE_COLUMN, DEFAULT_INPUTS_O_TABLE_COLUMN_CALCULATED, DEFAULT_INPUTS_O_TABLE_COLUMN_FILTER, DEFAULT_INPUTS_O_TABLE_COLUMN_FILTER_COLUMN, DEFAULT_INPUTS_O_TABLE_COLUMN_GROUPING, DEFAULT_INPUTS_O_TABLE_COLUMN_GROUPING_COLUMN, DEFAULT_INPUTS_O_TABLE_COLUMN_RESIZER, DEFAULT_INPUTS_O_TABLE_COLUMN_SELECTALL, DEFAULT_INPUTS_O_TABLE_EXPORT_BUTTON, DEFAULT_INPUTS_O_TABLE_HEADER, DEFAULT_INPUTS_O_TABLE_INSERTABLE_ROW, DEFAULT_INPUTS_O_TABLE_MENU, DEFAULT_INPUTS_O_TABLE_OPTION, DEFAULT_INPUTS_O_TABLE_QUICKFILTER, DEFAULT_INPUTS_O_TABLE_ROW_EXPANDABLE, DEFAULT_INPUTS_O_TEXTAREA_INPUT, DEFAULT_INPUTS_O_TEXT_INPUT, DEFAULT_INPUTS_O_TEXT_RENDERER, DEFAULT_INPUTS_O_TIME_INPUT, DEFAULT_INPUTS_O_TREE, DEFAULT_INPUTS_O_USER_INFO, DEFAULT_INPUTS_O_USER_INFO_MENU, DEFAULT_INPUTS_O_USER_INFO_MENU_ITEM, DEFAULT_INPUTS_O_VALIDATOR, DEFAULT_INPUT_O_EXPANDABLE_CONTAINER, DEFAULT_OUTPUTS_LANGUAGE_SELECTOR, DEFAULT_OUTPUTS_O_APP_HEADER, DEFAULT_OUTPUTS_O_APP_LAYOUT, DEFAULT_OUTPUTS_O_APP_SIDENAV, DEFAULT_OUTPUTS_O_APP_SIDENAV_IMAGE, DEFAULT_OUTPUTS_O_APP_SIDENAV_MENU_GROUP, DEFAULT_OUTPUTS_O_APP_SIDENAV_MENU_ITEM, DEFAULT_OUTPUTS_O_BUTTON, DEFAULT_OUTPUTS_O_BUTTON_TOGGLE, DEFAULT_OUTPUTS_O_BUTTON_TOGGLE_GROUP, DEFAULT_OUTPUTS_O_CARD_RENDERER, DEFAULT_OUTPUTS_O_CONTAINER_COLLAPSIBLE, DEFAULT_OUTPUTS_O_CONTEXT_MENU, DEFAULT_OUTPUTS_O_DATERANGE_INPUT, DEFAULT_OUTPUTS_O_FILE_INPUT, DEFAULT_OUTPUTS_O_FILTER_BUILDER, DEFAULT_OUTPUTS_O_FORM, DEFAULT_OUTPUTS_O_FORM_DATA_COMPONENT, DEFAULT_OUTPUTS_O_FORM_LAYOUT_MANAGER, DEFAULT_OUTPUTS_O_FORM_LAYOUT_SPLIT_PANE, DEFAULT_OUTPUTS_O_FORM_LAYOUT_TABGROUP, DEFAULT_OUTPUTS_O_FORM_SERVICE_COMPONENT, DEFAULT_OUTPUTS_O_FORM_TOOLBAR, DEFAULT_OUTPUTS_O_HTML_INPUT, DEFAULT_OUTPUTS_O_LIST, DEFAULT_OUTPUTS_O_LIST_ITEM_CARD_IMAGE, DEFAULT_OUTPUTS_O_LIST_PICKER, DEFAULT_OUTPUTS_O_MENU_CARD, DEFAULT_OUTPUTS_O_MENU_LAYOUT, DEFAULT_OUTPUTS_O_PERCENT_INPUT, DEFAULT_OUTPUTS_O_SEARCH_INPUT, DEFAULT_OUTPUTS_O_SERVICE_COMPONENT, DEFAULT_OUTPUTS_O_TABLE, DEFAULT_OUTPUTS_O_TABLE_BUTTON, DEFAULT_OUTPUTS_O_TABLE_BUTTONS, DEFAULT_OUTPUTS_O_TABLE_CELL_EDITOR, DEFAULT_OUTPUTS_O_TABLE_CELL_RENDERER_ACTION, DEFAULT_OUTPUTS_O_TABLE_CELL_RENDERER_IMAGE, DEFAULT_OUTPUTS_O_TABLE_CELL_RENDERER_SERVICE, DEFAULT_OUTPUTS_O_TABLE_COLUMN, DEFAULT_OUTPUTS_O_TABLE_COLUMN_FILTER, DEFAULT_OUTPUTS_O_TABLE_COLUMN_GROUPING, DEFAULT_OUTPUTS_O_TABLE_COLUMN_RESIZER, DEFAULT_OUTPUTS_O_TABLE_EXPORT_BUTTON, DEFAULT_OUTPUTS_O_TABLE_INSERTABLE_ROW, DEFAULT_OUTPUTS_O_TABLE_MENU, DEFAULT_OUTPUTS_O_TABLE_OPTION, DEFAULT_OUTPUTS_O_TABLE_QUICKFILTER, DEFAULT_OUTPUTS_O_TABLE_ROW_EXPANDABLE, DEFAULT_OUTPUTS_O_TEXT_RENDERER, DEFAULT_OUTPUTS_O_TREE, DEFAULT_OUTPUTS_O_USER_INFO, DEFAULT_OUTPUTS_O_USER_INFO_MENU, DEFAULT_PAGINATOR_TABLE, DEFAULT_TABLE_COLUMN_AGGREGATE, DEFAULT_TABLE_CONTEXT_MENU_INPUTS, DaterangepickerComponent, DefaultComponentStateClass, DefaultComponentStateService, DefaultOServiceBaseComponent, DefaultOTableDataSource, DefaultOTableOptions, DefaultServiceComponentStateClass, DefaultServiceComponentStateService, DialogService, Error403Component, ExportDataServiceProvider, FilterExpressionUtils, IconService, ListItem, LocalStorageService, LoginStorageService, MomentService, NavigationService, NumberConverter, NumberInputConverter, NumberService, OAppHeaderComponent, OAppHeaderModule, OAppLayoutComponent, OAppLayoutHeaderComponent, OAppLayoutModule, OAppLayoutSidenavComponent, OAppSidenavComponent, OAppSidenavImageComponent, OAppSidenavMenuGroupComponent, OAppSidenavMenuItemComponent, OAppSidenavModule, OBarMenuComponent, OBarMenuGroupComponent, OBarMenuItemComponent, OBarMenuModule, OBarMenuNestedComponent, OBarMenuSeparatorComponent, OBaseComponent, OBaseMenuItemClass, OBaseTableCellEditor, OBaseTableCellRenderer, OBaseTablePaginator, OBreadcrumbComponent, OBreadcrumbModule, OBreadcrumbService, OButtonComponent, OButtonModule, OButtonToggleComponent, OButtonToggleGroupComponent, OButtonToggleModule, OCardMenuItemComponent, OCardMenuItemModule, OCardMenuLayoutComponent, OCardMenuLayoutModule, OCheckboxComponent, OCheckboxModule, OColumn, OColumnCollapsibleComponent, OColumnCollapsibleModule, OColumnComponent, OColumnModule, OComboComponent, OComboCustomRenderer, OComboModule, OComboRendererBooleanComponent, OComboRendererCurrencyComponent, OComboRendererDateComponent, OComboRendererIconComponent, OComboRendererIntegerComponent, OComboRendererPercentageComponent, OComboRendererRealComponent, OComboSearchComponent, OComponentMenuBaseItem, OContainerCollapsibleComponent, OContainerComponent, OContextMenuComponent, OContextMenuContentComponent, OContextMenuDirective, OContextMenuGroupComponent, OContextMenuItemComponent, OContextMenuModule, OContextMenuSeparatorComponent, OContextMenuService, OCurrencyInputComponent, OCurrencyInputModule, OCurrencyPipe, OCustomMaterialModule, ODataToolbarComponent, ODataToolbarModule, ODateInputComponent, ODateInputModule, ODateRangeInputComponent, ODateRangeInputModule, ODaterangepickerDirective, ODialogComponent, ODialogConfig, ODualListSelectorComponent, ODualListSelectorDateItemComponent, ODualListSelectorModule, OEmailInputComponent, OEmailInputModule, OErrorComponent, OErrorDialogManager, OExpandableContainerComponent, OExpandableContainerModule, OFileDragAndDropDirective, OFileInputComponent, OFileInputModule, OFileItem, OFileUploader, OFilterBuilderClearDirective, OFilterBuilderComponent, OFilterBuilderMenuComponent, OFilterBuilderModule, OFilterBuilderQueryDirective, OFormCacheClass, OFormComponent, OFormContainerComponent, OFormContainerModule, OFormControl, OFormDataComponent, OFormLayoutDialogComponent, OFormLayoutDialogOptionsDirective, OFormLayoutManagerComponent, OFormLayoutManagerComponentStateClass, OFormLayoutManagerComponentStateService, OFormLayoutManagerContentDirective, OFormLayoutManagerModule, OFormLayoutManagerService, OFormLayoutSplitPaneComponent, OFormLayoutSplitPaneOptionsDirective, OFormLayoutTabGroupComponent, OFormLayoutTabGroupOptionsDirective, OFormMessageService, OFormModule, OFormNavigationClass, OFormNavigationComponent, OFormServiceComponent, OFormToolbarComponent, OFormToolbarModule, OFormValue, OFullScreenDialogComponent, OGridComponent, OGridComponentStateClass, OGridComponentStateService, OGridItemComponent, OGridItemDirective, OGridModule, OGridSkeletonComponent, OHTMLInputComponent, OHTMLInputModule, OHiddenDirective, OHourInputComponent, OHourInputModule, OIconPipe, OImageComponent, OImageModule, OIntegerInputComponent, OIntegerInputModule, OIntegerPipe, OKeyboardListenerDirective, OLanguageSelectorComponent, OLanguageSelectorModule, OListComponent, OListComponentStateClass, OListComponentStateService, OListItemAvatarComponent, OListItemCardComponent, OListItemCardImageComponent, OListItemCardRenderer, OListItemComponent, OListItemDirective, OListItemTextComponent, OListItemTextRenderer, OListModule, OListPickerComponent, OListPickerCustomRenderer, OListPickerDialogComponent, OListPickerModule, OListPickerRendererCurrencyComponent, OListPickerRendererDateComponent, OListPickerRendererIntegerComponent, OListPickerRendererPercentageComponent, OListPickerRendererRealComponent, OListSkeletonComponent, OLoadFilterDialogComponent, OLocaleBarMenuItemComponent, OLockerDirective, OMatErrorDirective, OMatPrefix, OMatSort, OMatSortHeader, OMatSortModule, OMatSuffix, OModulesInfoService, OMomentPipe, ONIFInputComponent, ONIFInputModule, ONTIMIZE_MODULES, ONTIMIZE_PROVIDERS, ONavigationItem, OPasswordInputComponent, OPasswordInputModule, OPercentInputComponent, OPercentInputModule, OPercentPipe, OPermissionsModule, OPhoneInputComponent, OPhoneInputModule, ORadioComponent, ORadioModule, ORealInputComponent, ORealInputModule, ORealPipe, ORemoteConfigurationService, ORowCollapsibleComponent, ORowCollapsibleModule, ORowComponent, ORowModule, OSafePipe, OSearchInputComponent, OSearchInputModule, OServiceBaseComponent, OServiceComponent, OSharedModule, OSkeletonComponent, OSlideToggleComponent, OSlideToggleModule, OSliderComponent, OSliderModule, OSnackBarComponent, OSnackBarConfig, OStoreFilterDialogComponent, OTabGroupDirective, OTableApplyConfigurationDialogComponent, OTableBase, OTableBaseDialogClass, OTableButtonComponent, OTableButtonsComponent, OTableCellEditorBooleanComponent, OTableCellEditorDateComponent, OTableCellEditorEmailComponent, OTableCellEditorIntegerComponent, OTableCellEditorRealComponent, OTableCellEditorTextComponent, OTableCellEditorTimeComponent, OTableCellRendererActionComponent, OTableCellRendererBooleanComponent, OTableCellRendererCurrencyComponent, OTableCellRendererDateComponent, OTableCellRendererImageComponent, OTableCellRendererIntegerComponent, OTableCellRendererPercentageComponent, OTableCellRendererRealComponent, OTableCellRendererServiceComponent, OTableCellRendererTimeComponent, OTableCellRendererTranslateComponent, OTableColumnAggregateComponent, OTableColumnCalculatedComponent, OTableColumnComponent, OTableColumnResizerComponent, OTableColumnSelectAllDirective, OTableColumnsFilterColumnComponent, OTableColumnsFilterComponent, OTableColumnsGroupingColumnComponent, OTableColumnsGroupingComponent, OTableComponent, OTableComponentStateClass, OTableComponentStateService, OTableContextMenuComponent, OTableDao, OTableDataSourceService, OTableExpandedFooterDirective, OTableExportButtonComponent, OTableExportButtonService, OTableExportConfiguration, OTableExportDialogComponent, OTableFilterByColumnDataDialogComponent, OTableGroupByColumnsDialogComponent, OTableGroupedRow, OTableHeaderComponent, OTableHeaderSelectAllComponent, OTableInsertableRowComponent, OTableMatPaginatorIntl, OTableMenuComponent, OTableModule, OTableOptionComponent, OTablePaginatorComponent, OTableQuickfilterComponent, OTableRowClassPipe, OTableRowDirective, OTableRowExpandableComponent, OTableRowExpandedChange, OTableSkeletonComponent, OTableStoreConfigurationDialogComponent, OTableVirtualScrollStrategy, OTableVisibleColumnsDialogComponent, OTextInputComponent, OTextInputModule, OTextareaInputComponent, OTextareaInputModule, OTimeInputComponent, OTimeInputModule, OTranslateHttpLoader, OTranslateModule, OTranslateParser, OTranslatePipe, OTranslateService, OTreeComponent, OTreeMenuComponent, OTreeModule, OTreeNodeComponent, OUserInfoComponent, OUserInfoConfigurationDirective, OUserInfoConfigurationItemDirective, OUserInfoModule, OUserInfoService, OValidatorComponent, OValidators, OValueChangeEvent, OWrapperContentMenuComponent, O_AUTH_SERVICE, O_CHART_ON_DEMAND_SERVICE, O_COMPONENT_STATE_SERVICE, O_DATA_SERVICE, O_ERROR_DIALOG_MANAGER, O_EXPORT_DATA_SERVICE, O_EXPORT_SERVICE, O_FILE_SERVICE, O_FORM_MESSAGE_SERVICE, O_INPUTS_OPTIONS, O_MAT_ERROR_OPTIONS, O_PERMISSION_SERVICE, O_REPORT_SERVICE, O_TABLE_CELL_EDITORS, O_TABLE_CELL_EDITORS_INPUTS, O_TABLE_CELL_EDITORS_OUTPUTS, O_TABLE_CELL_RENDERERS, O_TABLE_CELL_RENDERERS_INPUTS, O_TABLE_CELL_RENDERERS_OUTPUTS, O_TABLE_GLOBAL_CONFIG, O_TRANSLATE_SERVICE, ObservableWrapper, OnRangeChangeVirtualScroll, OntimizeAuthService, OntimizeAuthServiceProvider, OntimizeBaseService, OntimizeEEPermissionsService, OntimizeEEService, OntimizeExportDataProviderService, OntimizeExportDataProviderService3X, OntimizeExportService, OntimizeExportService3X, OntimizeExportServiceProvider, OntimizeFileService, OntimizeMatDateFormats, OntimizeMatIconRegistry, OntimizeMomentDateAdapter, OntimizePermissionsService, OntimizeService, OntimizeServiceProvider, OntimizeServiceResponse, OntimizeServiceResponseAdapter, OntimizeServiceResponseParser, OntimizeWebModule, OntimizeWebTranslateModule, OrderByPipe, PermissionsGuardService, PermissionsService, PermissionsUtils, SQLTypes, ServiceUtils, ShareCanActivateChildService, SideEnum, SnackBarService, StringConverter, TWELVE_HOUR_FORMAT_PATTERN, TWENTY_FOUR_HOUR_FORMAT_PATTERN, TableFilterByColumnDialogResult, Util, _getInjectionTokenValue, appConfigFactory, authServiceFactory, componentStateFactory, dataServiceFactory, dateFormatFactory, editorsMapping, exportDataFactory, exportServiceFactory, fileServiceFactory, getPermissionsServiceProvider, noop, ontimizePostBootstrap, permissionsServiceFactory, renderersMapping, translateServiceFactory };
+export { APP_CONFIG, AbstractComponentStateClass, AbstractComponentStateService, AbstractOServiceBaseComponent, AbstractOServiceComponent, AbstractServiceComponentStateClass, AppConfig, AppConfigFactory, AppMenuService, AppearanceService, AuthGuardService, AuthService, Base64, BaseService, BaseServiceResponse, BooleanConverter, BooleanInputConverter, CKEditorComponent, CKEditorModule, CanActivateFormLayoutChildGuard, CanDeactivateFormGuard, Codes, ColumnValueFilterOperator, ColumnsFilterPipe, ComponentStateServiceProvider, CurrencyService, CurrencyUtil, DEFAULT_CONTEXT_MENU_CONTENT_INPUTS, DEFAULT_CONTEXT_MENU_CONTENT_ITEM_INPUTS, DEFAULT_CONTEXT_MENU_CONTENT_OUTPUTS, DEFAULT_CONTEXT_MENU_DIRECTIVE_INPUTS, DEFAULT_CONTEXT_MENU_ITEM_INPUTS, DEFAULT_CONTEXT_MENU_ITEM_OUTPUTS, DEFAULT_DUAL_LIST_SELECTOR, DEFAULT_DUAL_LIST_SELECTOR_DATE_ITEM, DEFAULT_INPUTS_O_APP_HEADER, DEFAULT_INPUTS_O_APP_LAYOUT, DEFAULT_INPUTS_O_APP_LAYOUT_HEADER, DEFAULT_INPUTS_O_APP_LAYOUT_SIDENAV, DEFAULT_INPUTS_O_APP_SIDENAV, DEFAULT_INPUTS_O_APP_SIDENAV_IMAGE, DEFAULT_INPUTS_O_APP_SIDENAV_MENU_GROUP, DEFAULT_INPUTS_O_APP_SIDENAV_MENU_ITEM, DEFAULT_INPUTS_O_BAR_MENU, DEFAULT_INPUTS_O_BAR_MENU_ITEM, DEFAULT_INPUTS_O_BAR_MENU_NESTED, DEFAULT_INPUTS_O_BASE_MENU_ITEM, DEFAULT_INPUTS_O_BASE_TABLE_CELL_RENDERER, DEFAULT_INPUTS_O_BREADCRUMB, DEFAULT_INPUTS_O_BUTTON, DEFAULT_INPUTS_O_BUTTON_TOGGLE, DEFAULT_INPUTS_O_BUTTON_TOGGLE_GROUP, DEFAULT_INPUTS_O_CARD_RENDERER, DEFAULT_INPUTS_O_CHECKBOX, DEFAULT_INPUTS_O_COMBO, DEFAULT_INPUTS_O_COMBO_RENDERER, DEFAULT_INPUTS_O_COMBO_RENDERER_BOOLEAN, DEFAULT_INPUTS_O_COMBO_RENDERER_CURRENCY, DEFAULT_INPUTS_O_COMBO_RENDERER_DATE, DEFAULT_INPUTS_O_COMBO_RENDERER_ICON, DEFAULT_INPUTS_O_COMBO_RENDERER_INTEGER, DEFAULT_INPUTS_O_COMBO_RENDERER_PERCENTAGE, DEFAULT_INPUTS_O_COMBO_RENDERER_REAL, DEFAULT_INPUTS_O_CONTAINER, DEFAULT_INPUTS_O_CONTAINER_COLLAPSIBLE, DEFAULT_INPUTS_O_CONTEXT_MENU_ITEMS, DEFAULT_INPUTS_O_CURRENCY_INPUT, DEFAULT_INPUTS_O_DATA_TOOLBAR, DEFAULT_INPUTS_O_DATERANGE_INPUT, DEFAULT_INPUTS_O_DATE_INPUT, DEFAULT_INPUTS_O_ERROR, DEFAULT_INPUTS_O_FILE_INPUT, DEFAULT_INPUTS_O_FILTER_BUILDER, DEFAULT_INPUTS_O_FILTER_BUILDER_MENU, DEFAULT_INPUTS_O_FORM, DEFAULT_INPUTS_O_FORM_CONTAINER, DEFAULT_INPUTS_O_FORM_DATA_COMPONENT, DEFAULT_INPUTS_O_FORM_LAYOUT_MANAGER, DEFAULT_INPUTS_O_FORM_LAYOUT_SPLIT_PANE, DEFAULT_INPUTS_O_FORM_LAYOUT_TABGROUP, DEFAULT_INPUTS_O_FORM_SERVICE_COMPONENT, DEFAULT_INPUTS_O_FORM_TOOLBAR, DEFAULT_INPUTS_O_GRID, DEFAULT_INPUTS_O_GRID_ITEM, DEFAULT_INPUTS_O_HOUR_INPUT, DEFAULT_INPUTS_O_HTML_INPUT, DEFAULT_INPUTS_O_IMAGE, DEFAULT_INPUTS_O_INTEGER_INPUT, DEFAULT_INPUTS_O_LANGUAGE_SELECTOR, DEFAULT_INPUTS_O_LIST, DEFAULT_INPUTS_O_LISTPICKER_RENDERER, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_CURRENCY, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_DATE, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_INTEGER, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_PERCENTAGE, DEFAULT_INPUTS_O_LISTPICKER_RENDERER_REAL, DEFAULT_INPUTS_O_LIST_ITEM_AVATAR, DEFAULT_INPUTS_O_LIST_ITEM_CARD_IMAGE, DEFAULT_INPUTS_O_LIST_ITEM_TEXT, DEFAULT_INPUTS_O_LIST_PICKER, DEFAULT_INPUTS_O_LIST_PICKER_DIALOG, DEFAULT_INPUTS_O_LOCALE_BAR_MENU_ITEM, DEFAULT_INPUTS_O_LOCKER, DEFAULT_INPUTS_O_MENU_CARD, DEFAULT_INPUTS_O_MENU_LAYOUT, DEFAULT_INPUTS_O_PASSWORD_INPUT, DEFAULT_INPUTS_O_PERCENT_INPUT, DEFAULT_INPUTS_O_PHONE_INPUT, DEFAULT_INPUTS_O_RADIO, DEFAULT_INPUTS_O_REAL_INPUT, DEFAULT_INPUTS_O_SEARCH_INPUT, DEFAULT_INPUTS_O_SERVICE_BASE_COMPONENT, DEFAULT_INPUTS_O_SERVICE_COMPONENT, DEFAULT_INPUTS_O_SLIDER_INPUT, DEFAULT_INPUTS_O_SLIDETOGGLE, DEFAULT_INPUTS_O_TABLE, DEFAULT_INPUTS_O_TABLE_BUTTON, DEFAULT_INPUTS_O_TABLE_BUTTONS, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_BOOLEAN, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_DATE, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_INTEGER, DEFAULT_INPUTS_O_TABLE_CELL_EDITOR_TIME, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_ACTION, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_BOOLEAN, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_CURRENCY, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_DATE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_IMAGE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_INTEGER, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_PERCENTAGE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_REAL, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_SERVICE, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_TIME, DEFAULT_INPUTS_O_TABLE_CELL_RENDERER_TRANSLATE, DEFAULT_INPUTS_O_TABLE_COLUMN, DEFAULT_INPUTS_O_TABLE_COLUMN_CALCULATED, DEFAULT_INPUTS_O_TABLE_COLUMN_FILTER, DEFAULT_INPUTS_O_TABLE_COLUMN_FILTER_COLUMN, DEFAULT_INPUTS_O_TABLE_COLUMN_GROUPING, DEFAULT_INPUTS_O_TABLE_COLUMN_GROUPING_COLUMN, DEFAULT_INPUTS_O_TABLE_COLUMN_RESIZER, DEFAULT_INPUTS_O_TABLE_COLUMN_SELECTALL, DEFAULT_INPUTS_O_TABLE_EXPORT_BUTTON, DEFAULT_INPUTS_O_TABLE_HEADER, DEFAULT_INPUTS_O_TABLE_INSERTABLE_ROW, DEFAULT_INPUTS_O_TABLE_MENU, DEFAULT_INPUTS_O_TABLE_OPTION, DEFAULT_INPUTS_O_TABLE_QUICKFILTER, DEFAULT_INPUTS_O_TABLE_ROW_EXPANDABLE, DEFAULT_INPUTS_O_TEXTAREA_INPUT, DEFAULT_INPUTS_O_TEXT_INPUT, DEFAULT_INPUTS_O_TEXT_RENDERER, DEFAULT_INPUTS_O_TIME_INPUT, DEFAULT_INPUTS_O_TREE, DEFAULT_INPUTS_O_USER_INFO, DEFAULT_INPUTS_O_USER_INFO_MENU, DEFAULT_INPUTS_O_USER_INFO_MENU_ITEM, DEFAULT_INPUTS_O_VALIDATOR, DEFAULT_INPUT_O_EXPANDABLE_CONTAINER, DEFAULT_OUTPUTS_LANGUAGE_SELECTOR, DEFAULT_OUTPUTS_O_APP_HEADER, DEFAULT_OUTPUTS_O_APP_LAYOUT, DEFAULT_OUTPUTS_O_APP_SIDENAV, DEFAULT_OUTPUTS_O_APP_SIDENAV_IMAGE, DEFAULT_OUTPUTS_O_APP_SIDENAV_MENU_GROUP, DEFAULT_OUTPUTS_O_APP_SIDENAV_MENU_ITEM, DEFAULT_OUTPUTS_O_BUTTON, DEFAULT_OUTPUTS_O_BUTTON_TOGGLE, DEFAULT_OUTPUTS_O_BUTTON_TOGGLE_GROUP, DEFAULT_OUTPUTS_O_CARD_RENDERER, DEFAULT_OUTPUTS_O_CONTAINER_COLLAPSIBLE, DEFAULT_OUTPUTS_O_CONTEXT_MENU, DEFAULT_OUTPUTS_O_DATERANGE_INPUT, DEFAULT_OUTPUTS_O_FILE_INPUT, DEFAULT_OUTPUTS_O_FILTER_BUILDER, DEFAULT_OUTPUTS_O_FORM, DEFAULT_OUTPUTS_O_FORM_DATA_COMPONENT, DEFAULT_OUTPUTS_O_FORM_LAYOUT_MANAGER, DEFAULT_OUTPUTS_O_FORM_LAYOUT_SPLIT_PANE, DEFAULT_OUTPUTS_O_FORM_LAYOUT_TABGROUP, DEFAULT_OUTPUTS_O_FORM_SERVICE_COMPONENT, DEFAULT_OUTPUTS_O_FORM_TOOLBAR, DEFAULT_OUTPUTS_O_HTML_INPUT, DEFAULT_OUTPUTS_O_LIST, DEFAULT_OUTPUTS_O_LIST_ITEM_CARD_IMAGE, DEFAULT_OUTPUTS_O_LIST_PICKER, DEFAULT_OUTPUTS_O_MENU_CARD, DEFAULT_OUTPUTS_O_MENU_LAYOUT, DEFAULT_OUTPUTS_O_PERCENT_INPUT, DEFAULT_OUTPUTS_O_SEARCH_INPUT, DEFAULT_OUTPUTS_O_SERVICE_COMPONENT, DEFAULT_OUTPUTS_O_TABLE, DEFAULT_OUTPUTS_O_TABLE_BUTTON, DEFAULT_OUTPUTS_O_TABLE_BUTTONS, DEFAULT_OUTPUTS_O_TABLE_CELL_EDITOR, DEFAULT_OUTPUTS_O_TABLE_CELL_RENDERER_ACTION, DEFAULT_OUTPUTS_O_TABLE_CELL_RENDERER_IMAGE, DEFAULT_OUTPUTS_O_TABLE_CELL_RENDERER_SERVICE, DEFAULT_OUTPUTS_O_TABLE_COLUMN, DEFAULT_OUTPUTS_O_TABLE_COLUMN_FILTER, DEFAULT_OUTPUTS_O_TABLE_COLUMN_GROUPING, DEFAULT_OUTPUTS_O_TABLE_COLUMN_RESIZER, DEFAULT_OUTPUTS_O_TABLE_EXPORT_BUTTON, DEFAULT_OUTPUTS_O_TABLE_INSERTABLE_ROW, DEFAULT_OUTPUTS_O_TABLE_MENU, DEFAULT_OUTPUTS_O_TABLE_OPTION, DEFAULT_OUTPUTS_O_TABLE_QUICKFILTER, DEFAULT_OUTPUTS_O_TABLE_ROW_EXPANDABLE, DEFAULT_OUTPUTS_O_TEXT_RENDERER, DEFAULT_OUTPUTS_O_TREE, DEFAULT_OUTPUTS_O_USER_INFO, DEFAULT_OUTPUTS_O_USER_INFO_MENU, DEFAULT_PAGINATOR_TABLE, DEFAULT_TABLE_COLUMN_AGGREGATE, DEFAULT_TABLE_CONTEXT_MENU_INPUTS, DaterangepickerComponent, DefaultComponentStateClass, DefaultComponentStateService, DefaultOServiceBaseComponent, DefaultOTableDataSource, DefaultOTableOptions, DefaultServiceComponentStateClass, DefaultServiceComponentStateService, DialogService, Error403Component, ExportDataServiceProvider, FilterExpressionUtils, IconService, ListItem, LocalStorageService, LoginStorageService, MomentService, NavigationService, NumberConverter, NumberInputConverter, NumberService, OAppHeaderComponent, OAppHeaderModule, OAppLayoutComponent, OAppLayoutHeaderComponent, OAppLayoutModule, OAppLayoutSidenavComponent, OAppSidenavComponent, OAppSidenavImageComponent, OAppSidenavMenuGroupComponent, OAppSidenavMenuItemComponent, OAppSidenavModule, OBarMenuComponent, OBarMenuGroupComponent, OBarMenuItemComponent, OBarMenuModule, OBarMenuNestedComponent, OBarMenuSeparatorComponent, OBaseComponent, OBaseMenuItemClass, OBaseTableCellEditor, OBaseTableCellRenderer, OBaseTablePaginator, OBreadcrumbComponent, OBreadcrumbModule, OBreadcrumbService, OButtonComponent, OButtonModule, OButtonToggleComponent, OButtonToggleGroupComponent, OButtonToggleModule, OCardMenuItemComponent, OCardMenuItemModule, OCardMenuLayoutComponent, OCardMenuLayoutModule, OCheckboxComponent, OCheckboxModule, OColumn, OColumnCollapsibleComponent, OColumnCollapsibleModule, OColumnComponent, OColumnModule, OComboComponent, OComboCustomRenderer, OComboModule, OComboRendererBooleanComponent, OComboRendererCurrencyComponent, OComboRendererDateComponent, OComboRendererIconComponent, OComboRendererIntegerComponent, OComboRendererPercentageComponent, OComboRendererRealComponent, OComboSearchComponent, OComponentMenuBaseItem, OContainerCollapsibleComponent, OContainerComponent, OContextMenuComponent, OContextMenuContentComponent, OContextMenuDirective, OContextMenuGroupComponent, OContextMenuItemComponent, OContextMenuModule, OContextMenuSeparatorComponent, OContextMenuService, OCurrencyInputComponent, OCurrencyInputModule, OCurrencyPipe, OCustomMaterialModule, ODataToolbarComponent, ODataToolbarModule, ODateInputComponent, ODateInputModule, ODateRangeInputComponent, ODateRangeInputModule, ODaterangepickerDirective, ODialogComponent, ODialogConfig, ODualListSelectorComponent, ODualListSelectorDateItemComponent, ODualListSelectorModule, OEmailInputComponent, OEmailInputModule, OErrorComponent, OErrorDialogManager, OExpandableContainerComponent, OExpandableContainerModule, OFileDragAndDropDirective, OFileInputComponent, OFileInputModule, OFileItem, OFileUploader, OFilterBuilderClearDirective, OFilterBuilderComponent, OFilterBuilderMenuComponent, OFilterBuilderModule, OFilterBuilderQueryDirective, OFormCacheClass, OFormComponent, OFormContainerComponent, OFormContainerModule, OFormControl, OFormDataComponent, OFormLayoutDialogComponent, OFormLayoutDialogOptionsDirective, OFormLayoutManagerComponent, OFormLayoutManagerComponentStateClass, OFormLayoutManagerComponentStateService, OFormLayoutManagerContentDirective, OFormLayoutManagerModule, OFormLayoutManagerService, OFormLayoutSplitPaneComponent, OFormLayoutSplitPaneOptionsDirective, OFormLayoutTabGroupComponent, OFormLayoutTabGroupOptionsDirective, OFormMessageService, OFormModule, OFormNavigationClass, OFormNavigationComponent, OFormServiceComponent, OFormToolbarComponent, OFormToolbarModule, OFormValue, OFullScreenDialogComponent, OGridComponent, OGridComponentStateClass, OGridComponentStateService, OGridItemComponent, OGridItemDirective, OGridModule, OGridSkeletonComponent, OHTMLInputComponent, OHTMLInputModule, OHiddenDirective, OHourInputComponent, OHourInputModule, OIconPipe, OImageComponent, OImageModule, OIntegerInputComponent, OIntegerInputModule, OIntegerPipe, OKeyboardListenerDirective, OLanguageSelectorComponent, OLanguageSelectorModule, OListComponent, OListComponentStateClass, OListComponentStateService, OListItemAvatarComponent, OListItemCardComponent, OListItemCardImageComponent, OListItemCardRenderer, OListItemComponent, OListItemDirective, OListItemTextComponent, OListItemTextRenderer, OListModule, OListPickerComponent, OListPickerCustomRenderer, OListPickerDialogComponent, OListPickerModule, OListPickerRendererCurrencyComponent, OListPickerRendererDateComponent, OListPickerRendererIntegerComponent, OListPickerRendererPercentageComponent, OListPickerRendererRealComponent, OListSkeletonComponent, OLoadFilterDialogComponent, OLocaleBarMenuItemComponent, OLockerDirective, OMatErrorDirective, OMatPrefix, OMatSort, OMatSortHeader, OMatSortModule, OMatSuffix, OModulesInfoService, OMomentPipe, ONIFInputComponent, ONIFInputModule, ONTIMIZE_MODULES, ONTIMIZE_PROVIDERS, ONavigationItem, OPasswordInputComponent, OPasswordInputModule, OPercentInputComponent, OPercentInputModule, OPercentPipe, OPermissionsModule, OPhoneInputComponent, OPhoneInputModule, ORadioComponent, ORadioModule, ORealInputComponent, ORealInputModule, ORealPipe, ORemoteConfigurationService, ORowCollapsibleComponent, ORowCollapsibleModule, ORowComponent, ORowModule, OSafePipe, OSearchInputComponent, OSearchInputModule, OServiceBaseComponent, OServiceComponent, OSharedModule, OSkeletonComponent, OSlideToggleComponent, OSlideToggleModule, OSliderComponent, OSliderModule, OSnackBarComponent, OSnackBarConfig, OStoreFilterDialogComponent, OTabGroupDirective, OTableApplyConfigurationDialogComponent, OTableBase, OTableBaseDialogClass, OTableButtonComponent, OTableButtonsComponent, OTableCellEditorBooleanComponent, OTableCellEditorDateComponent, OTableCellEditorEmailComponent, OTableCellEditorIntegerComponent, OTableCellEditorRealComponent, OTableCellEditorTextComponent, OTableCellEditorTimeComponent, OTableCellRendererActionComponent, OTableCellRendererBooleanComponent, OTableCellRendererCurrencyComponent, OTableCellRendererDateComponent, OTableCellRendererImageComponent, OTableCellRendererIntegerComponent, OTableCellRendererPercentageComponent, OTableCellRendererRealComponent, OTableCellRendererServiceComponent, OTableCellRendererTimeComponent, OTableCellRendererTranslateComponent, OTableColumnAggregateComponent, OTableColumnCalculatedComponent, OTableColumnComponent, OTableColumnResizerComponent, OTableColumnSelectAllDirective, OTableColumnsFilterColumnComponent, OTableColumnsFilterComponent, OTableColumnsGroupingColumnComponent, OTableColumnsGroupingComponent, OTableComponent, OTableComponentStateClass, OTableComponentStateService, OTableContextMenuComponent, OTableDao, OTableDataSourceService, OTableExpandedFooterDirective, OTableExportButtonComponent, OTableExportButtonService, OTableExportConfiguration, OTableExportDialogComponent, OTableFilterByColumnDataDialogComponent, OTableGroupByColumnsDialogComponent, OTableGroupedRow, OTableHeaderComponent, OTableHeaderSelectAllComponent, OTableInsertableRowComponent, OTableMatPaginatorIntl, OTableMenuComponent, OTableModule, OTableOptionComponent, OTablePaginatorComponent, OTableQuickfilterComponent, OTableRowClassPipe, OTableRowDirective, OTableRowExpandableComponent, OTableRowExpandedChange, OTableSkeletonComponent, OTableStoreConfigurationDialogComponent, OTableVirtualScrollStrategy, OTableVisibleColumnsDialogComponent, OTextInputComponent, OTextInputModule, OTextareaInputComponent, OTextareaInputModule, OTimeInputComponent, OTimeInputModule, OTranslateHttpLoader, OTranslateModule, OTranslateParser, OTranslatePipe, OTranslateService, OTreeComponent, OTreeMenuComponent, OTreeModule, OTreeNodeComponent, OUserInfoComponent, OUserInfoConfigurationDirective, OUserInfoConfigurationItemDirective, OUserInfoModule, OUserInfoService, OValidatorComponent, OValidators, OValueChangeEvent, OWrapperContentMenuComponent, O_AUTH_SERVICE, O_CHART_ON_DEMAND_SERVICE, O_COMPONENT_STATE_SERVICE, O_DATA_SERVICE, O_ERROR_DIALOG_MANAGER, O_EXPORT_DATA_SERVICE, O_EXPORT_SERVICE, O_FILE_SERVICE, O_FORM_GLOBAL_CONFIG, O_FORM_MESSAGE_SERVICE, O_GLOBAL_CONFIG, O_INPUTS_OPTIONS, O_MAT_ERROR_OPTIONS, O_PERMISSION_SERVICE, O_REPORT_SERVICE, O_TABLE_CELL_EDITORS, O_TABLE_CELL_EDITORS_INPUTS, O_TABLE_CELL_EDITORS_OUTPUTS, O_TABLE_CELL_RENDERERS, O_TABLE_CELL_RENDERERS_INPUTS, O_TABLE_CELL_RENDERERS_OUTPUTS, O_TABLE_GLOBAL_CONFIG, O_TRANSLATE_SERVICE, ObservableWrapper, OnRangeChangeVirtualScroll, OntimizeAuthService, OntimizeAuthServiceProvider, OntimizeBaseService, OntimizeEEPermissionsService, OntimizeEEService, OntimizeExportDataProviderService, OntimizeExportDataProviderService3X, OntimizeExportService, OntimizeExportService3X, OntimizeExportServiceProvider, OntimizeFileService, OntimizeMatDateFormats, OntimizeMatIconRegistry, OntimizeMomentDateAdapter, OntimizePermissionsService, OntimizeService, OntimizeServiceProvider, OntimizeServiceResponse, OntimizeServiceResponseAdapter, OntimizeServiceResponseParser, OntimizeWebModule, OntimizeWebTranslateModule, OrderByPipe, PermissionsGuardService, PermissionsService, PermissionsUtils, SQLTypes, ServiceUtils, ShareCanActivateChildService, SideEnum, SnackBarService, StringConverter, TWELVE_HOUR_FORMAT_PATTERN, TWENTY_FOUR_HOUR_FORMAT_PATTERN, TableFilterByColumnDialogResult, Util, _getInjectionTokenValue, appConfigFactory, authServiceFactory, componentStateFactory, dataServiceFactory, dateFormatFactory, editorsMapping, exportDataFactory, exportServiceFactory, fileServiceFactory, getPermissionsServiceProvider, noop, ontimizePostBootstrap, permissionsServiceFactory, renderersMapping, translateServiceFactory };
 //# sourceMappingURL=ontimize-web-ngx.mjs.map