npm - ontimize-web-ngx - Versions diffs - 15.0.0-beta.2 → 15.0.0-beta.4 - Mend

ontimize-web-ngx 15.0.0-beta.2 → 15.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/fesm2015/ontimize-web-ngx.mjs CHANGED Viewed

@@ -1487,7 +1487,7 @@ const MAP = {
         'TABLE.BUTTONS.SAVE_CONFIGURATION': 'Guardar configuración',
         'TABLE.BUTTONS.APPLY_CONFIGURATION': 'Aplicar configuración',
         'TABLE.BUTTONS.APPLY': 'Aplicar',
-        'TABLE.BUTTONS.RESETWIDTH': 'Resetear el archo de las columnas',
+        'TABLE.BUTTONS.RESETWIDTH': 'Resetear el ancho de las columnas',
         'TABLE.BUTTONS.REPORT_ON_DEMAND': 'Informe a la carta',
         'TABLE.SELECT.ROWS._': '%d registros seleccionados',
         'TABLE.SELECT.ROWS.0': ' ',
@@ -2897,13 +2897,17 @@ class LocalStorageService {
         this.setLocalStorage(appData);
     }
     storeComponentInSessionUser(componentKey, componentDataB64) {
+        var _a;
         const appData = this.getStoredData();
         const session = appData[LocalStorageService.SESSION_STORAGE_KEY] || {};
         if (!Util.isDefined(this.authService)) {
             this.authService = this.injector.get(AuthService);
         }
         const users = appData[LocalStorageService.USERS_STORAGE_KEY] || {};
-        const idUser = session.user || this.authService.getSessionInfo().user;
+        const idUser = session.user || ((_a = this.authService.getSessionInfo()) === null || _a === void 0 ? void 0 : _a.user);
+        if (!Util.isDefined(idUser)) {
+            return;
+        }
         const user = users[idUser] || {};
         let componentsData = {};
         if (users[idUser]) {
@@ -4987,10 +4991,10 @@ class OWrapperContentMenuComponent {
     }
 }
 OWrapperContentMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OWrapperContentMenuComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-OWrapperContentMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OWrapperContentMenuComponent, selector: "o-wrapper-content-menu", inputs: { items: "items", class: "class" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: OWrapperContentMenuComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-menu #childMenu=\"matMenu\" [class]=\"class\" [overlapTrigger]=\"false\" [hasBackdrop]=\"false\">\n  <ng-container *ngFor=\"let child of items\">\n    <!-- Handle branch node menu items -->\n    <span *ngIf=\"isGroup(child) && child.isVisible\">\n      <button mat-menu-item color=\"primary\" [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"child.disabled\">\n        <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n        <span>{{ child.label | oTranslate}}</span>\n      </button>\n      <o-wrapper-content-menu #menu [items]=\"getChildren(child)\" [class]=\"class\"></o-wrapper-content-menu>\n    </span>\n    <!-- Handle leaf node menu items -->\n    <button mat-menu-item (click)=\"onClick(child, $event)\" [disabled]=\"child.disabled\" *ngIf=\"isItem(child) && child.isVisible\">\n      <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n      <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n      <span>{{ child.label | oTranslate}} </span>\n    </button>\n    <!-- separator leaf node menu items -->\n    <mat-divider *ngIf=\"isSeparator(child) && child.isVisible\"></mat-divider>\n  </ng-container>\n</mat-menu>\n", styles: ["mat-divider.mat-divider:first-child,mat-divider.mat-divider:last-child{display:none}.mat-icon{display:inline-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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: OWrapperContentMenuComponent, selector: "o-wrapper-content-menu", inputs: ["items", "class"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }] });
+OWrapperContentMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OWrapperContentMenuComponent, selector: "o-wrapper-content-menu", inputs: { items: "items", class: "class" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: OWrapperContentMenuComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-menu class=\"o-mat-menu\" #childMenu=\"matMenu\" [class]=\"class\" [overlapTrigger]=\"false\" [hasBackdrop]=\"false\">\n  <ng-container *ngFor=\"let child of items\">\n    <!-- Handle branch node menu items -->\n    <span *ngIf=\"isGroup(child) && child.isVisible\">\n      <button mat-menu-item color=\"primary\" [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"child.disabled\">\n        <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n        <span>{{ child.label | oTranslate}}</span>\n      </button>\n      <o-wrapper-content-menu #menu [items]=\"getChildren(child)\" [class]=\"class\"></o-wrapper-content-menu>\n    </span>\n    <!-- Handle leaf node menu items -->\n    <button mat-menu-item (click)=\"onClick(child, $event)\" [disabled]=\"child.disabled\" *ngIf=\"isItem(child) && child.isVisible\">\n      <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n      <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n      <span>{{ child.label | oTranslate}} </span>\n    </button>\n    <!-- separator leaf node menu items -->\n    <mat-divider *ngIf=\"isSeparator(child) && child.isVisible\"></mat-divider>\n  </ng-container>\n</mat-menu>\n", styles: ["mat-divider.mat-divider:first-child,mat-divider.mat-divider:last-child{display:none}.mat-icon{display:inline-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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: OWrapperContentMenuComponent, selector: "o-wrapper-content-menu", inputs: ["items", "class"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OWrapperContentMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'o-wrapper-content-menu', inputs: DEFAULT_CONTEXT_MENU_CONTENT_ITEM_INPUTS, template: "<mat-menu #childMenu=\"matMenu\" [class]=\"class\" [overlapTrigger]=\"false\" [hasBackdrop]=\"false\">\n  <ng-container *ngFor=\"let child of items\">\n    <!-- Handle branch node menu items -->\n    <span *ngIf=\"isGroup(child) && child.isVisible\">\n      <button mat-menu-item color=\"primary\" [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"child.disabled\">\n        <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n        <span>{{ child.label | oTranslate}}</span>\n      </button>\n      <o-wrapper-content-menu #menu [items]=\"getChildren(child)\" [class]=\"class\"></o-wrapper-content-menu>\n    </span>\n    <!-- Handle leaf node menu items -->\n    <button mat-menu-item (click)=\"onClick(child, $event)\" [disabled]=\"child.disabled\" *ngIf=\"isItem(child) && child.isVisible\">\n      <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n      <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n      <span>{{ child.label | oTranslate}} </span>\n    </button>\n    <!-- separator leaf node menu items -->\n    <mat-divider *ngIf=\"isSeparator(child) && child.isVisible\"></mat-divider>\n  </ng-container>\n</mat-menu>\n", styles: ["mat-divider.mat-divider:first-child,mat-divider.mat-divider:last-child{display:none}.mat-icon{display:inline-flex}\n"] }]
+            args: [{ selector: 'o-wrapper-content-menu', inputs: DEFAULT_CONTEXT_MENU_CONTENT_ITEM_INPUTS, template: "<mat-menu class=\"o-mat-menu\" #childMenu=\"matMenu\" [class]=\"class\" [overlapTrigger]=\"false\" [hasBackdrop]=\"false\">\n  <ng-container *ngFor=\"let child of items\">\n    <!-- Handle branch node menu items -->\n    <span *ngIf=\"isGroup(child) && child.isVisible\">\n      <button mat-menu-item color=\"primary\" [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"child.disabled\">\n        <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n        <span>{{ child.label | oTranslate}}</span>\n      </button>\n      <o-wrapper-content-menu #menu [items]=\"getChildren(child)\" [class]=\"class\"></o-wrapper-content-menu>\n    </span>\n    <!-- Handle leaf node menu items -->\n    <button mat-menu-item (click)=\"onClick(child, $event)\" [disabled]=\"child.disabled\" *ngIf=\"isItem(child) && child.isVisible\">\n      <mat-icon *ngIf=\"child.svgIcon != null\" [svgIcon]=\"child.svgIcon\"></mat-icon>\n      <mat-icon *ngIf=\"child.svgIcon == null && child.icon != null\">{{ child.icon }}</mat-icon>\n      <span>{{ child.label | oTranslate}} </span>\n    </button>\n    <!-- separator leaf node menu items -->\n    <mat-divider *ngIf=\"isSeparator(child) && child.isVisible\"></mat-divider>\n  </ng-container>\n</mat-menu>\n", styles: ["mat-divider.mat-divider:first-child,mat-divider.mat-divider:last-child{display:none}.mat-icon{display:inline-flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { items: [{
                 type: Input
             }], childMenu: [{
@@ -10765,10 +10769,10 @@ class OLoadFilterDialogComponent {
     }
 }
 OLoadFilterDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OLoadFilterDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-OLoadFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OLoadFilterDialogComponent, selector: "o-load-filter-dialog", viewQueries: [{ propertyName: "filterList", first: true, predicate: MatSelectionList, descendants: true, static: true }], ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate }}</span>\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.LOAD_FILTER' | oTranslate }}</div>\n  <mat-selection-list #filterList dense class=\"o-table-load-filter-dialog-list\">\n    <mat-list-option *ngFor=\"let filter of filters \" [value]=\"filter.name\" checkboxPosition=\"before\">\n      <span matListItemTitle class=\"o-table-load-filter-dialog-list-title\">{{ filter.name }}</span>\n      <span matListItemTitle>{{ filter.description }}</span>\n    </mat-list-option>\n    <mat-list-item *ngIf=\"filters.length === 0\">\n      <span class=\"empty-filter-list\">{{ 'TABLE.DIALOG.EMPTY_FILTER_LIST' | oTranslate }}</span>\n    </mat-list-item>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    (click)=\"removeFilter(filterList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">{{ 'DELETE' | oTranslate }}</button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">\n    {{'TABLE.BUTTONS.APPLY' | oTranslate }}\n  </button>\n</mat-dialog-actions>\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.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: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OLoadFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OLoadFilterDialogComponent, selector: "o-load-filter-dialog", viewQueries: [{ propertyName: "filterList", first: true, predicate: MatSelectionList, descendants: true, static: true }], ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate }}</span>\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.LOAD_FILTER' | oTranslate }}</div>\n  <mat-selection-list #filterList class=\"o-table-load-filter-dialog-list\">\n    <mat-list-option *ngFor=\"let filter of filters \" [value]=\"filter.name\" checkboxPosition=\"before\">\n      <span matListItemTitle class=\"o-table-load-filter-dialog-list-title\">{{ filter.name }}</span>\n      <span matListItemLine>{{ filter.description }}</span>\n    </mat-list-option>\n    <mat-list-item *ngIf=\"filters.length === 0\">\n      <span class=\"empty-filter-list\">{{ 'TABLE.DIALOG.EMPTY_FILTER_LIST' | oTranslate }}</span>\n    </mat-list-item>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    (click)=\"removeFilter(filterList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">{{ 'DELETE' | oTranslate }}</button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">\n    {{'TABLE.BUTTONS.APPLY' | oTranslate }}\n  </button>\n</mat-dialog-actions>\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.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: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OLoadFilterDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'o-load-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate }}</span>\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.LOAD_FILTER' | oTranslate }}</div>\n  <mat-selection-list #filterList dense class=\"o-table-load-filter-dialog-list\">\n    <mat-list-option *ngFor=\"let filter of filters \" [value]=\"filter.name\" checkboxPosition=\"before\">\n      <span matListItemTitle class=\"o-table-load-filter-dialog-list-title\">{{ filter.name }}</span>\n      <span matListItemTitle>{{ filter.description }}</span>\n    </mat-list-option>\n    <mat-list-item *ngIf=\"filters.length === 0\">\n      <span class=\"empty-filter-list\">{{ 'TABLE.DIALOG.EMPTY_FILTER_LIST' | oTranslate }}</span>\n    </mat-list-item>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    (click)=\"removeFilter(filterList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">{{ 'DELETE' | oTranslate }}</button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">\n    {{'TABLE.BUTTONS.APPLY' | oTranslate }}\n  </button>\n</mat-dialog-actions>\n" }]
+            args: [{ selector: 'o-load-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate }}</span>\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.LOAD_FILTER' | oTranslate }}</div>\n  <mat-selection-list #filterList class=\"o-table-load-filter-dialog-list\">\n    <mat-list-option *ngFor=\"let filter of filters \" [value]=\"filter.name\" checkboxPosition=\"before\">\n      <span matListItemTitle class=\"o-table-load-filter-dialog-list-title\">{{ filter.name }}</span>\n      <span matListItemLine>{{ filter.description }}</span>\n    </mat-list-option>\n    <mat-list-item *ngIf=\"filters.length === 0\">\n      <span class=\"empty-filter-list\">{{ 'TABLE.DIALOG.EMPTY_FILTER_LIST' | oTranslate }}</span>\n    </mat-list-item>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    (click)=\"removeFilter(filterList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">{{ 'DELETE' | oTranslate }}</button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"filterList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">\n    {{'TABLE.BUTTONS.APPLY' | oTranslate }}\n  </button>\n</mat-dialog-actions>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -13476,7 +13480,7 @@ class OSearchInputComponent {
     }
 }
 OSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OSearchInputComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OSearchInputComponent, selector: "o-search-input", inputs: { placeholder: "placeholder", label: "label", width: "width", floatLabel: ["float-label", "floatLabel"], appearance: "appearance", columns: "columns", filterCaseSensitive: ["filter-case-sensitive", "filterCaseSensitive"], showCaseSensitiveCheckbox: ["show-case-sensitive-checkbox", "showCaseSensitiveCheckbox"], showMenu: ["show-menu", "showMenu"] }, outputs: { onSearch: "onSearch" }, host: { properties: { "class.o-search-input": "true" } }, ngImport: i0, template: "<form [formGroup]=\"getFormGroup()\">\n  <div class=\"quickFilter\" fxLayout=\"row\">\n    <mat-form-field [appearance]=\"appearance\">\n      <mat-icon *ngIf=\"!showFilterMenu\" svgIcon=\"ontimize:search\" matPrefix></mat-icon>\n      <input #term matInput id=\"term\" type=\"search\" formControlName=\"term\" [placeholder]=\"placeholder\">\n      <mat-label *ngIf=\"labelVisible\">{{ label | oTranslate }}</mat-label>\n      <div *ngIf=\"showFilterMenu\" fxLayout=\"row\" matPrefix>\n        <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n          <mat-icon class=\"search-icon\">expand_more</mat-icon>\n        </button>\n      </div>\n\n\n      <mat-menu #menu=\"matMenu\" class=\"o-search-input-menu\">\n        <div fxLayout=\"column\" class=\"checkbox-container\">\n\n          <ng-container *ngIf=\"colArray.length > 1\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n              {{ 'SELECT_ALL' | oTranslate }}</mat-checkbox>\n            <mat-divider></mat-divider>\n          </ng-container>\n\n          <ng-container *ngFor=\"let item of colArray\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(item)\" (change)=\"onCheckboxChange(item, $event)\">\n              {{ item.column | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n\n          <ng-container *ngIf=\"showCaseSensitiveCheckbox\">\n            <mat-divider></mat-divider>\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"filterCaseSensitive\" (change)=\"onFilterCaseSensitiveChange($event)\">\n              {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </mat-menu>\n    </mat-form-field>\n  </div>\n</form>\n", styles: [".o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-bottom:0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{height:32px;line-height:32px;padding:0 10px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{border-top:0;padding:0 4px;align-self:center}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{align-self:stretch;display:flex}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:inline-flex;margin:2px 0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button{height:100%;width:auto}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-subscript-wrapper{display:none}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-flex{padding-top:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-underline{bottom:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{margin:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{border-right:1px solid rgba(0,0,0,.12)}.o-search-input-menu .mat-divider{margin:8px 0}.o-search-input-menu .checkbox-container{padding:6px 12px}\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: i3$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+OSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OSearchInputComponent, selector: "o-search-input", inputs: { placeholder: "placeholder", label: "label", width: "width", floatLabel: ["float-label", "floatLabel"], appearance: "appearance", columns: "columns", filterCaseSensitive: ["filter-case-sensitive", "filterCaseSensitive"], showCaseSensitiveCheckbox: ["show-case-sensitive-checkbox", "showCaseSensitiveCheckbox"], showMenu: ["show-menu", "showMenu"] }, outputs: { onSearch: "onSearch" }, host: { properties: { "class.o-search-input": "true" } }, ngImport: i0, template: "<form [formGroup]=\"getFormGroup()\">\n  <div class=\"quickFilter\" fxLayout=\"row\">\n    <mat-form-field [appearance]=\"appearance\">\n      <mat-icon *ngIf=\"!showFilterMenu\" svgIcon=\"ontimize:search\" matPrefix></mat-icon>\n      <input #term matInput id=\"term\" type=\"search\" formControlName=\"term\" [placeholder]=\"placeholder\">\n      <mat-label *ngIf=\"labelVisible\">{{ label | oTranslate }}</mat-label>\n      <div *ngIf=\"showFilterMenu\" fxLayout=\"row\" matPrefix>\n        <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n          <mat-icon class=\"search-icon\">expand_more</mat-icon>\n        </button>\n      </div>\n\n\n      <mat-menu #menu=\"matMenu\" class=\"o-search-input-menu\">\n        <div fxLayout=\"column\" class=\"checkbox-container\">\n\n          <ng-container *ngIf=\"colArray.length > 1\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n              {{ 'SELECT_ALL' | oTranslate }}</mat-checkbox>\n            <mat-divider></mat-divider>\n          </ng-container>\n\n          <ng-container *ngFor=\"let item of colArray\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(item)\" (change)=\"onCheckboxChange(item, $event)\">\n              {{ item.column | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n\n          <ng-container *ngIf=\"showCaseSensitiveCheckbox\">\n            <mat-divider></mat-divider>\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"filterCaseSensitive\" (change)=\"onFilterCaseSensitiveChange($event)\">\n              {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </mat-menu>\n    </mat-form-field>\n  </div>\n</form>\n", styles: [".o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-bottom:0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{height:32px;line-height:32px;padding:0 10px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{border-top:0;padding:0 4px;align-self:center}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{align-self:stretch;display:flex}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:inline-flex;margin:2px 0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button{height:100%;width:auto}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-subscript-wrapper{display:none}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-flex{padding-top:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-underline{bottom:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{margin:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{border-right:1px solid rgba(0,0,0,.12)}.o-search-input-menu .mat-divider{margin:8px 0}.o-search-input-menu .checkbox-container{padding:6px 12px}\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: i3$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -13493,7 +13497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Component,
             args: [{ selector: 'o-search-input', inputs: DEFAULT_INPUTS_O_SEARCH_INPUT, outputs: DEFAULT_OUTPUTS_O_SEARCH_INPUT, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-search-input]': 'true'
-                    }, template: "<form [formGroup]=\"getFormGroup()\">\n  <div class=\"quickFilter\" fxLayout=\"row\">\n    <mat-form-field [appearance]=\"appearance\">\n      <mat-icon *ngIf=\"!showFilterMenu\" svgIcon=\"ontimize:search\" matPrefix></mat-icon>\n      <input #term matInput id=\"term\" type=\"search\" formControlName=\"term\" [placeholder]=\"placeholder\">\n      <mat-label *ngIf=\"labelVisible\">{{ label | oTranslate }}</mat-label>\n      <div *ngIf=\"showFilterMenu\" fxLayout=\"row\" matPrefix>\n        <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n          <mat-icon class=\"search-icon\">expand_more</mat-icon>\n        </button>\n      </div>\n\n\n      <mat-menu #menu=\"matMenu\" class=\"o-search-input-menu\">\n        <div fxLayout=\"column\" class=\"checkbox-container\">\n\n          <ng-container *ngIf=\"colArray.length > 1\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n              {{ 'SELECT_ALL' | oTranslate }}</mat-checkbox>\n            <mat-divider></mat-divider>\n          </ng-container>\n\n          <ng-container *ngFor=\"let item of colArray\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(item)\" (change)=\"onCheckboxChange(item, $event)\">\n              {{ item.column | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n\n          <ng-container *ngIf=\"showCaseSensitiveCheckbox\">\n            <mat-divider></mat-divider>\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"filterCaseSensitive\" (change)=\"onFilterCaseSensitiveChange($event)\">\n              {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </mat-menu>\n    </mat-form-field>\n  </div>\n</form>\n", styles: [".o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-bottom:0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{height:32px;line-height:32px;padding:0 10px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{border-top:0;padding:0 4px;align-self:center}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{align-self:stretch;display:flex}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:inline-flex;margin:2px 0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button{height:100%;width:auto}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-subscript-wrapper{display:none}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-flex{padding-top:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-underline{bottom:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{margin:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{border-right:1px solid rgba(0,0,0,.12)}.o-search-input-menu .mat-divider{margin:8px 0}.o-search-input-menu .checkbox-container{padding:6px 12px}\n"] }]
+                    }, template: "<form [formGroup]=\"getFormGroup()\">\n  <div class=\"quickFilter\" fxLayout=\"row\">\n    <mat-form-field [appearance]=\"appearance\">\n      <mat-icon *ngIf=\"!showFilterMenu\" svgIcon=\"ontimize:search\" matPrefix></mat-icon>\n      <input #term matInput id=\"term\" type=\"search\" formControlName=\"term\" [placeholder]=\"placeholder\">\n      <mat-label *ngIf=\"labelVisible\">{{ label | oTranslate }}</mat-label>\n      <div *ngIf=\"showFilterMenu\" fxLayout=\"row\" matPrefix>\n        <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n          <mat-icon class=\"search-icon\">expand_more</mat-icon>\n        </button>\n      </div>\n\n\n      <mat-menu #menu=\"matMenu\" class=\"o-search-input-menu\">\n        <div fxLayout=\"column\" class=\"checkbox-container\">\n\n          <ng-container *ngIf=\"colArray.length > 1\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n              {{ 'SELECT_ALL' | oTranslate }}</mat-checkbox>\n            <mat-divider></mat-divider>\n          </ng-container>\n\n          <ng-container *ngFor=\"let item of colArray\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(item)\" (change)=\"onCheckboxChange(item, $event)\">\n              {{ item.column | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n\n          <ng-container *ngIf=\"showCaseSensitiveCheckbox\">\n            <mat-divider></mat-divider>\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"filterCaseSensitive\" (change)=\"onFilterCaseSensitiveChange($event)\">\n              {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </mat-menu>\n    </mat-form-field>\n  </div>\n</form>\n", styles: [".o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-bottom:0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{height:32px;line-height:32px;padding:0 10px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{border-top:0;padding:0 4px;align-self:center}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{align-self:stretch;display:flex}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:inline-flex;margin:2px 0}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button{height:100%;width:auto}.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,.o-search-input .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-subscript-wrapper{display:none}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-flex{padding-top:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-underline{bottom:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{margin:0}.o-search-input .quickFilter .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{border-right:1px solid rgba(0,0,0,.12)}.o-search-input-menu .mat-divider{margin:8px 0}.o-search-input-menu .checkbox-container{padding:6px 12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { showCaseSensitiveCheckbox: [], showMenu: [], _filterCaseSensitive: [] } });
 class OSearchInputModule {
@@ -14151,7 +14155,7 @@ class OFormLayoutTabGroupComponent {
     }
 }
 OFormLayoutTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OFormLayoutTabGroupComponent, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: forwardRef(() => OFormLayoutManagerBase) }], target: i0.ɵɵFactoryTarget.Component });
-OFormLayoutTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OFormLayoutTabGroupComponent, selector: "o-form-layout-tabgroup", inputs: { title: "title", options: "options", stretchTabs: ["stretch-tabs", "stretchTabs"] }, outputs: { onMainTabSelected: "onMainTabSelected", onSelectedTabChange: "onSelectedTabChange", onCloseTab: "onCloseTab" }, host: { properties: { "class.o-form-layout-tabgroup": "true" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }, { propertyName: "tabsDirectives", predicate: OFormLayoutManagerContentDirective, descendants: true }], ngImport: i0, template: "<mat-tab-group #tabGroup oTabGroup=\"ontimize\" fxFill (selectedTabChange)=\"onTabSelectChange($event)\" [color]=\"color\"\n  [backgroundColor]=\"backgroundColor\" [headerPosition]=\"headerPosition\" [@.disabled]=\"disableAnimation\" [mat-stretch-tabs]=\"stretchTabs\">\n  <mat-tab label=\"{{ mainTabTitle | oTranslate }}\">\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tabData of data; let i = index\">\n    <ng-template mat-tab-label>\n      <span class=\"tab-label\" [class.modified]=\"isTabDataModified(tabData)\">\n        <ng-container *ngIf=\"icon && isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <ng-container *ngIf=\"templateMatTabLabel && tabData.formDataByLabelColumns && !tabData.insertionMode \">\n          <ng-container *ngTemplateOutlet=\"templateMatTabLabel;context:{$implicit:tabData.formDataByLabelColumns}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!templateMatTabLabel || tabData.insertionMode\">\n          {{ tabData.label }}\n        </ng-container>\n        <ng-container *ngIf=\"icon && !isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <span class=\"gradient-layer\"></span>\n      </span>\n      <mat-icon (click)=\"closeTab(i)\" svgIcon=\"ontimize:close\"></mat-icon>\n    </ng-template>\n    <ng-template o-form-layout-manager-content [index]=\"i\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n<div *ngIf=\"showLoading | async\" class=\"spinner-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.mdc-tab__ripple{display:none}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label{width:100%;max-width:120px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified{font-weight:700}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified:after{content:\"*\"}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab .mat-icon{height:14px;width:14px;font-size:8px;margin-left:6px;vertical-align:middle}.o-form-layout-tabgroup .mat-mdc-tab-group .mat-mdc-tab-body-wrapper{flex:1 1 auto}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar{padding:0;top:0px!important}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar .mat-toolbar{box-shadow:none;border-radius:0}.o-form-layout-tabgroup .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}\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.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: OTabGroupDirective, selector: "[oTabGroup]", inputs: ["oTabGroup"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: OFormLayoutManagerContentDirective, selector: "[o-form-layout-manager-content]", inputs: ["index"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+OFormLayoutTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OFormLayoutTabGroupComponent, selector: "o-form-layout-tabgroup", inputs: { title: "title", options: "options", stretchTabs: ["stretch-tabs", "stretchTabs"] }, outputs: { onMainTabSelected: "onMainTabSelected", onSelectedTabChange: "onSelectedTabChange", onCloseTab: "onCloseTab" }, host: { properties: { "class.o-form-layout-tabgroup": "true" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }, { propertyName: "tabsDirectives", predicate: OFormLayoutManagerContentDirective, descendants: true }], ngImport: i0, template: "<mat-tab-group #tabGroup oTabGroup=\"ontimize\" fxFill (selectedTabChange)=\"onTabSelectChange($event)\" [color]=\"color\"\n  [backgroundColor]=\"backgroundColor\" [headerPosition]=\"headerPosition\" [@.disabled]=\"disableAnimation\" [mat-stretch-tabs]=\"stretchTabs\">\n  <mat-tab label=\"{{ mainTabTitle | oTranslate }}\">\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tabData of data; let i = index\">\n    <ng-template mat-tab-label>\n      <span class=\"tab-label\" [class.modified]=\"isTabDataModified(tabData)\">\n        <ng-container *ngIf=\"icon && isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <ng-container *ngIf=\"templateMatTabLabel && tabData.formDataByLabelColumns && !tabData.insertionMode \">\n          <ng-container *ngTemplateOutlet=\"templateMatTabLabel;context:{$implicit:tabData.formDataByLabelColumns}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!templateMatTabLabel || tabData.insertionMode\">\n          {{ tabData.label }}\n        </ng-container>\n        <ng-container *ngIf=\"icon && !isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <span class=\"gradient-layer\"></span>\n      </span>\n      <mat-icon (click)=\"closeTab(i)\" svgIcon=\"ontimize:close\"></mat-icon>\n    </ng-template>\n    <ng-template o-form-layout-manager-content [index]=\"i\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n<div *ngIf=\"showLoading | async\" class=\"spinner-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.mdc-tab__ripple{display:none}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label{width:100%;max-width:120px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified{font-weight:700}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified:after{content:\"*\"}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab .mat-icon{height:14px;width:14px;min-width:14px;font-size:8px;margin-left:6px;vertical-align:middle}.o-form-layout-tabgroup .mat-mdc-tab-group .mat-mdc-tab-body-wrapper{flex:1 1 auto}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar{padding:0;top:0px!important}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar .mat-toolbar{box-shadow:none;border-radius:0}.o-form-layout-tabgroup .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}\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.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: OTabGroupDirective, selector: "[oTabGroup]", inputs: ["oTabGroup"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: OFormLayoutManagerContentDirective, selector: "[o-form-layout-manager-content]", inputs: ["index"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -14160,7 +14164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Component,
             args: [{ selector: 'o-form-layout-tabgroup', inputs: DEFAULT_INPUTS_O_FORM_LAYOUT_TABGROUP, outputs: DEFAULT_OUTPUTS_O_FORM_LAYOUT_TABGROUP, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-form-layout-tabgroup]': 'true'
-                    }, template: "<mat-tab-group #tabGroup oTabGroup=\"ontimize\" fxFill (selectedTabChange)=\"onTabSelectChange($event)\" [color]=\"color\"\n  [backgroundColor]=\"backgroundColor\" [headerPosition]=\"headerPosition\" [@.disabled]=\"disableAnimation\" [mat-stretch-tabs]=\"stretchTabs\">\n  <mat-tab label=\"{{ mainTabTitle | oTranslate }}\">\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tabData of data; let i = index\">\n    <ng-template mat-tab-label>\n      <span class=\"tab-label\" [class.modified]=\"isTabDataModified(tabData)\">\n        <ng-container *ngIf=\"icon && isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <ng-container *ngIf=\"templateMatTabLabel && tabData.formDataByLabelColumns && !tabData.insertionMode \">\n          <ng-container *ngTemplateOutlet=\"templateMatTabLabel;context:{$implicit:tabData.formDataByLabelColumns}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!templateMatTabLabel || tabData.insertionMode\">\n          {{ tabData.label }}\n        </ng-container>\n        <ng-container *ngIf=\"icon && !isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <span class=\"gradient-layer\"></span>\n      </span>\n      <mat-icon (click)=\"closeTab(i)\" svgIcon=\"ontimize:close\"></mat-icon>\n    </ng-template>\n    <ng-template o-form-layout-manager-content [index]=\"i\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n<div *ngIf=\"showLoading | async\" class=\"spinner-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.mdc-tab__ripple{display:none}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label{width:100%;max-width:120px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified{font-weight:700}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified:after{content:\"*\"}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab .mat-icon{height:14px;width:14px;font-size:8px;margin-left:6px;vertical-align:middle}.o-form-layout-tabgroup .mat-mdc-tab-group .mat-mdc-tab-body-wrapper{flex:1 1 auto}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar{padding:0;top:0px!important}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar .mat-toolbar{box-shadow:none;border-radius:0}.o-form-layout-tabgroup .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}\n"] }]
+                    }, template: "<mat-tab-group #tabGroup oTabGroup=\"ontimize\" fxFill (selectedTabChange)=\"onTabSelectChange($event)\" [color]=\"color\"\n  [backgroundColor]=\"backgroundColor\" [headerPosition]=\"headerPosition\" [@.disabled]=\"disableAnimation\" [mat-stretch-tabs]=\"stretchTabs\">\n  <mat-tab label=\"{{ mainTabTitle | oTranslate }}\">\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tabData of data; let i = index\">\n    <ng-template mat-tab-label>\n      <span class=\"tab-label\" [class.modified]=\"isTabDataModified(tabData)\">\n        <ng-container *ngIf=\"icon && isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <ng-container *ngIf=\"templateMatTabLabel && tabData.formDataByLabelColumns && !tabData.insertionMode \">\n          <ng-container *ngTemplateOutlet=\"templateMatTabLabel;context:{$implicit:tabData.formDataByLabelColumns}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!templateMatTabLabel || tabData.insertionMode\">\n          {{ tabData.label }}\n        </ng-container>\n        <ng-container *ngIf=\"icon && !isIconPositionLeft\">\n          <mat-icon>{{ icon }}</mat-icon>\n        </ng-container>\n        <span class=\"gradient-layer\"></span>\n      </span>\n      <mat-icon (click)=\"closeTab(i)\" svgIcon=\"ontimize:close\"></mat-icon>\n    </ng-template>\n    <ng-template o-form-layout-manager-content [index]=\"i\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n<div *ngIf=\"showLoading | async\" class=\"spinner-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.mdc-tab__ripple{display:none}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label{width:100%;max-width:120px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified{font-weight:700}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab span.tab-label.modified:after{content:\"*\"}.o-form-layout-tabgroup .mat-mdc-tab-group .mdc-tab .mat-icon{height:14px;width:14px;min-width:14px;font-size:8px;margin-left:6px;vertical-align:middle}.o-form-layout-tabgroup .mat-mdc-tab-group .mat-mdc-tab-body-wrapper{flex:1 1 auto}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar{padding:0;top:0px!important}.o-form-layout-tabgroup .mat-mdc-tab-group o-form-toolbar .mat-toolbar{box-shadow:none;border-radius:0}.o-form-layout-tabgroup .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: OFormLayoutManagerBase, decorators: [{
                         type: Inject,
@@ -16484,7 +16488,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, usesOnChanges: 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 aria-label=\"Insert\"\n          (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | 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 aria-label=\"Insert\"\n          (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  <!--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  <!--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()\" class=\"o-grid-add-floatable-button\"\n    [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\" 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\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      <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n    </div>\n  </div>\n\n</div>\n", styles: [":host.o-grid{height:100%}:host.o-grid .o-grid-container{position:relative;height:100%;display:flex}:host.o-grid .o-grid-container .o-grid-no-results{padding:16px}:host.o-grid .o-grid-container .o-grid-paginator,:host.o-grid .o-grid-container .o-grid-sort{margin-right:1em}:host.o-grid .o-grid-container .o-grid-paginator{display:flex}:host.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}:host.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}:host.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}:host.o-grid .o-grid-container .o-grid-footer,:host.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}:host.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}:host.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}:host.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}:host.o-grid.o-grid-fixed{max-height:100%;height:100%}:host.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}:host.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}:host.o-grid.o-grid-fixed .o-grid-footer,:host.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}:host.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}:host.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}:host.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: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i11$1.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: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }] });
+    ], 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, usesOnChanges: 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 aria-label=\"Insert\"\n          (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | 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 aria-label=\"Insert\"\n          (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  <!--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  <!--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()\" class=\"o-grid-add-floatable-button\"\n    [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\" 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\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      <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n    </div>\n  </div>\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: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i11$1.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: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -16523,10 +16527,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         OntimizeServiceProvider,
                         ComponentStateServiceProvider,
                         { provide: O_COMPONENT_STATE_SERVICE, useClass: OGridComponentStateService },
-                    ], inputs: DEFAULT_INPUTS_O_GRID, host: {
+                    ], 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 aria-label=\"Insert\"\n          (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | 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 aria-label=\"Insert\"\n          (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  <!--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  <!--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()\" class=\"o-grid-add-floatable-button\"\n    [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\" 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\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      <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n    </div>\n  </div>\n\n</div>\n", styles: [":host.o-grid{height:100%}:host.o-grid .o-grid-container{position:relative;height:100%;display:flex}:host.o-grid .o-grid-container .o-grid-no-results{padding:16px}:host.o-grid .o-grid-container .o-grid-paginator,:host.o-grid .o-grid-container .o-grid-sort{margin-right:1em}:host.o-grid .o-grid-container .o-grid-paginator{display:flex}:host.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}:host.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}:host.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}:host.o-grid .o-grid-container .o-grid-footer,:host.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}:host.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}:host.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}:host.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}:host.o-grid.o-grid-fixed{max-height:100%;height:100%}:host.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}:host.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}:host.o-grid.o-grid-fixed .o-grid-footer,:host.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}:host.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}:host.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}:host.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\" class=\"o-grid-add-button o-grid-button text\"  mat-stroked-button aria-label=\"Insert\"\n          (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | 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 aria-label=\"Insert\"\n          (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  <!--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  <!--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()\" class=\"o-grid-add-floatable-button\"\n    [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\" 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\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      <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n    </div>\n  </div>\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
@@ -17431,7 +17435,7 @@ OComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 OComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 .mat-mdc-select-arrow-wrapper{line-height:20px}.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.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 }], 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.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)
@@ -17455,7 +17459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         { 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 .mat-mdc-select-arrow-wrapper{line-height:20px}.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 *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
@@ -18458,6 +18462,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
+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'
@@ -18465,16 +18522,7 @@ const DEFAULT_INPUTS_O_CURRENCY_INPUT = [
 class OCurrencyInputComponent extends ORealInputComponent {
     constructor() {
         super(...arguments);
-        this.currency_symbols = {
-            CRC: '₡',
-            NGN: '₦',
-            PHP: '₱',
-            PLN: 'zł',
-            PYG: '₲',
-            THB: '฿',
-            UAH: '₴',
-            VND: '₫',
-        };
+        this.currency_symbols = CurrencyUtil.currencyCodeToSymbol;
         this.currencySymbol = 'EUR';
         this.currencySymbolPosition = 'right';
     }
@@ -22458,12 +22506,12 @@ class OPhoneInputComponent extends OFormDataComponent {
     }
 }
 OPhoneInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OPhoneInputComponent, deps: [{ token: CountryCode }, { token: forwardRef(() => OFormComponent), optional: true }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-OPhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OPhoneInputComponent, selector: "o-phone-input", inputs: { gap: "gap", countries: "countries" }, outputs: { countryChange: "countryChange", onPhoneDataChange: "onPhoneDataChange" }, host: { properties: { "class.o-phone-input": "true" } }, providers: [CountryCode], viewQueries: [{ propertyName: "countryList", first: true, predicate: ["countryList"], descendants: true }, { propertyName: "matInputRef", first: true, predicate: ["matInputRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" fxLayout=\"row wrap\" [fxLayoutGap]=\"gap +' grid'\">\n  <mat-form-field class=\"mat-form-phone\" [floatLabel]=\"floatLabel\" [appearance]=\"appearance\" [class.read-only]=\"isReadOnly\" fxFlex.xs [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"selectedCountry\" (selectionChange)=\"onCountrySelect($event)\" [disabled]=\"!enabled\">\n      <mat-option *ngFor=\"let country of allCountries\" [value]=\"country\"> {{country.name}} +{{country.dialCode}}</mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field [hideRequiredMarker]=\"hideRequiredMarker\" [class.custom-width]=\"hasCustomWidth\" class=\"icon-field\" [appearance]=\"appearance\"\n    fxFlex>\n    <input #matInputRef matInput type=\"tel\" [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      (focus)=\"innerOnFocus($event)\" (blur)=\"innerOnBlur($event)\" [readonly]=\"isReadOnly\" (change)=\"onChangeEvent($event)\" [required]=\"isRequired\">\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n    <mat-icon matSuffix [class.mat-disabled]=\"!enabled\" class=\"svg-icon\" svgIcon=\"ontimize:phone_outline\"></mat-icon>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *oMatError=\"hasError('validatePhoneNumber')\">\n      {{ 'FORM_VALIDATION.PHONE_FORMAT' | 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>", styles: [".o-phone-input{overflow:hidden}.o-phone-input .read-only{pointer-events:none}.o-phone-input .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-phone-input .read-only .mdc-line-ripple:after{background-image:none}.o-phone-input .mat-mdc-form-field.icon-field{height:100%}\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.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: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.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: "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: 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: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+OPhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OPhoneInputComponent, selector: "o-phone-input", inputs: { gap: "gap", countries: "countries" }, outputs: { countryChange: "countryChange", onPhoneDataChange: "onPhoneDataChange" }, host: { properties: { "class.o-phone-input": "true" } }, providers: [CountryCode], viewQueries: [{ propertyName: "countryList", first: true, predicate: ["countryList"], descendants: true }, { propertyName: "matInputRef", first: true, predicate: ["matInputRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" fxLayout=\"row wrap\" [fxLayoutGap]=\"gap +' grid'\">\n  <mat-form-field class=\"mat-form-phone\" [floatLabel]=\"floatLabel\" [appearance]=\"appearance\" [class.read-only]=\"isReadOnly\" fxFlex.xs\n    [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"selectedCountry\" (selectionChange)=\"onCountrySelect($event)\" [disabled]=\"!enabled\">\n      <mat-option *ngFor=\"let country of allCountries\" [value]=\"country\"> {{country.name}} +{{country.dialCode}}</mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field [hideRequiredMarker]=\"hideRequiredMarker\" [class.custom-width]=\"hasCustomWidth\" class=\"icon-field\" [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\" fxFlex>\n    <input #matInputRef matInput type=\"tel\" [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      (focus)=\"innerOnFocus($event)\" (blur)=\"innerOnBlur($event)\" [readonly]=\"isReadOnly\" (change)=\"onChangeEvent($event)\" [required]=\"isRequired\">\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n    <mat-icon matSuffix [class.mat-disabled]=\"!enabled\" class=\"svg-icon\" svgIcon=\"ontimize:phone_outline\"></mat-icon>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *oMatError=\"hasError('validatePhoneNumber')\">\n      {{ 'FORM_VALIDATION.PHONE_FORMAT' | 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>\n", styles: [".o-phone-input{overflow:hidden}.o-phone-input .read-only{pointer-events:none}.o-phone-input .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-phone-input .read-only .mdc-line-ripple:after{background-image:none}.o-phone-input .mat-mdc-form-field.icon-field{height:100%}\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.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: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.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: "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: 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: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OPhoneInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-phone-input', inputs: DEFAULT_INPUTS_O_PHONE_INPUT, encapsulation: ViewEncapsulation.None, providers: [CountryCode], host: {
                         '[class.o-phone-input]': 'true'
-                    }, template: "<div [formGroup]=\"getFormGroup()\" fxLayout=\"row wrap\" [fxLayoutGap]=\"gap +' grid'\">\n  <mat-form-field class=\"mat-form-phone\" [floatLabel]=\"floatLabel\" [appearance]=\"appearance\" [class.read-only]=\"isReadOnly\" fxFlex.xs [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"selectedCountry\" (selectionChange)=\"onCountrySelect($event)\" [disabled]=\"!enabled\">\n      <mat-option *ngFor=\"let country of allCountries\" [value]=\"country\"> {{country.name}} +{{country.dialCode}}</mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field [hideRequiredMarker]=\"hideRequiredMarker\" [class.custom-width]=\"hasCustomWidth\" class=\"icon-field\" [appearance]=\"appearance\"\n    fxFlex>\n    <input #matInputRef matInput type=\"tel\" [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      (focus)=\"innerOnFocus($event)\" (blur)=\"innerOnBlur($event)\" [readonly]=\"isReadOnly\" (change)=\"onChangeEvent($event)\" [required]=\"isRequired\">\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n    <mat-icon matSuffix [class.mat-disabled]=\"!enabled\" class=\"svg-icon\" svgIcon=\"ontimize:phone_outline\"></mat-icon>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *oMatError=\"hasError('validatePhoneNumber')\">\n      {{ 'FORM_VALIDATION.PHONE_FORMAT' | 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>", styles: [".o-phone-input{overflow:hidden}.o-phone-input .read-only{pointer-events:none}.o-phone-input .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-phone-input .read-only .mdc-line-ripple:after{background-image:none}.o-phone-input .mat-mdc-form-field.icon-field{height:100%}\n"] }]
+                    }, template: "<div [formGroup]=\"getFormGroup()\" fxLayout=\"row wrap\" [fxLayoutGap]=\"gap +' grid'\">\n  <mat-form-field class=\"mat-form-phone\" [floatLabel]=\"floatLabel\" [appearance]=\"appearance\" [class.read-only]=\"isReadOnly\" fxFlex.xs\n    [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <mat-select [value]=\"selectedCountry\" (selectionChange)=\"onCountrySelect($event)\" [disabled]=\"!enabled\">\n      <mat-option *ngFor=\"let country of allCountries\" [value]=\"country\"> {{country.name}} +{{country.dialCode}}</mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field [hideRequiredMarker]=\"hideRequiredMarker\" [class.custom-width]=\"hasCustomWidth\" class=\"icon-field\" [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\" fxFlex>\n    <input #matInputRef matInput type=\"tel\" [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      (focus)=\"innerOnFocus($event)\" (blur)=\"innerOnBlur($event)\" [readonly]=\"isReadOnly\" (change)=\"onChangeEvent($event)\" [required]=\"isRequired\">\n    <button type=\"button\" *ngIf=\"showClearButton\" matSuffix mat-icon-button (click)=\"onClickClearValue($event)\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n    <mat-icon matSuffix [class.mat-disabled]=\"!enabled\" class=\"svg-icon\" svgIcon=\"ontimize:phone_outline\"></mat-icon>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *oMatError=\"hasError('validatePhoneNumber')\">\n      {{ 'FORM_VALIDATION.PHONE_FORMAT' | 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>\n", styles: [".o-phone-input{overflow:hidden}.o-phone-input .read-only{pointer-events:none}.o-phone-input .read-only .mat-mdc-select-arrow-wrapper{visibility:hidden}.o-phone-input .read-only .mdc-line-ripple:after{background-image:none}.o-phone-input .mat-mdc-form-field.icon-field{height:100%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: CountryCode }, { type: OFormComponent, decorators: [{
                         type: Optional
@@ -25077,7 +25125,6 @@ const DEFAULT_INPUTS_O_LIST = [
     'refreshButton: refresh-button',
     'route',
     'selectable',
-    'odense : dense',
     'deleteButton: delete-button',
     'sortColumns: sort-columns',
     'insertButtonPosition:insert-button-position',
@@ -25094,7 +25141,6 @@ class OListComponent extends AbstractOServiceComponent {
         super(injector, elRef, form);
         this.refreshButton = true;
         this.selectable = false;
-        this.odense = false;
         this.deleteButton = true;
         this.insertButtonFloatable = true;
         this.showButtonsText = false;
@@ -25164,9 +25210,6 @@ class OListComponent extends AbstractOServiceComponent {
     reinitialize(options) {
         super.reinitialize(options);
     }
-    getDense() {
-        return this.odense;
-    }
     onListItemClicked(onNext) {
         return ObservableWrapper.subscribe(this.onClick, onNext);
     }
@@ -25318,11 +25361,11 @@ class OListComponent extends AbstractOServiceComponent {
     }
 }
 OListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OListComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: forwardRef(() => OFormComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListComponent, selector: "o-list", inputs: { quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], refreshButton: ["refresh-button", "refreshButton"], route: "route", selectable: "selectable", odense: ["dense", "odense"], deleteButton: ["delete-button", "deleteButton"], sortColumns: ["sort-columns", "sortColumns"], insertButtonPosition: ["insert-button-position", "insertButtonPosition"], insertButtonFloatable: ["insert-button-floatable", "insertButtonFloatable"], showButtonsText: ["show-buttons-text", "showButtonsText"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"] }, outputs: { onInsertButtonClick: "onInsertButtonClick", onItemDeleted: "onItemDeleted" }, host: { properties: { "class.o-list": "true" } }, providers: [
+OListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListComponent, selector: "o-list", inputs: { quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], refreshButton: ["refresh-button", "refreshButton"], route: "route", selectable: "selectable", deleteButton: ["delete-button", "deleteButton"], sortColumns: ["sort-columns", "sortColumns"], insertButtonPosition: ["insert-button-position", "insertButtonPosition"], insertButtonFloatable: ["insert-button-floatable", "insertButtonFloatable"], showButtonsText: ["show-buttons-text", "showButtonsText"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"] }, outputs: { onInsertButtonClick: "onInsertButtonClick", onItemDeleted: "onItemDeleted" }, host: { properties: { "class.o-list": "true" } }, providers: [
         OntimizeServiceProvider,
         ComponentStateServiceProvider,
         { provide: O_COMPONENT_STATE_SERVICE, useClass: OListComponentStateService },
-    ], queries: [{ propertyName: "listItemDirectives", predicate: OListItemDirective }], usesInheritance: true, usesOnChanges: 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    <mat-progress-spinner strokeWidth=\"3\" mode=\"indeterminate\"></mat-progress-spinner>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [class.dense]=\"odense\" [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\" (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\" (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  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" [class.o-list-content-toolbar-dense]=\"hasControls() && odense\">\n\n    <!--MAT-LIST-->\n    <mat-list [attr.dense]=\"odense || undefined\" (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 matLine>\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 && odense\" mat-mini-fab (click)=\"add($event)\" class=\"add-button\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable && !odense\" 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\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 .o-list-content.o-list-content-toolbar-dense .add-button.add-button-top{top:60px}.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;background:rgb(255,255,255)}.o-list-container .spinner-container.pageable-loading{background:rgba(255,255,255,.5)}.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-has-buttons[dense] .o-list-item .mat-mdc-list-item{padding-right:56px}.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.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: "directive", type: i1$4.MatLine, selector: "[mat-line], [matLine]" }, { 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: "component", type: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { 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, usesOnChanges: 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    <mat-progress-spinner strokeWidth=\"3\" mode=\"indeterminate\"></mat-progress-spinner>\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\" (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\" (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  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\">\n\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 matLine>\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\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;background:rgb(255,255,255)}.o-list-container .spinner-container.pageable-loading{background:rgba(255,255,255,.5)}.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: "directive", type: i1$4.MatLine, selector: "[mat-line], [matLine]" }, { 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: "component", type: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -25331,10 +25374,6 @@ __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
 ], OListComponent.prototype, "selectable", void 0);
-__decorate([
-    BooleanInputConverter(),
-    __metadata("design:type", Boolean)
-], OListComponent.prototype, "odense", void 0);
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -25355,7 +25394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         { 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    <mat-progress-spinner strokeWidth=\"3\" mode=\"indeterminate\"></mat-progress-spinner>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [class.dense]=\"odense\" [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\" (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\" (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  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" [class.o-list-content-toolbar-dense]=\"hasControls() && odense\">\n\n    <!--MAT-LIST-->\n    <mat-list [attr.dense]=\"odense || undefined\" (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 matLine>\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 && odense\" mat-mini-fab (click)=\"add($event)\" class=\"add-button\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable && !odense\" 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\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 .o-list-content.o-list-content-toolbar-dense .add-button.add-button-top{top:60px}.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;background:rgb(255,255,255)}.o-list-container .spinner-container.pageable-loading{background:rgba(255,255,255,.5)}.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-has-buttons[dense] .o-list-item .mat-mdc-list-item{padding-right:56px}.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    <mat-progress-spinner strokeWidth=\"3\" mode=\"indeterminate\"></mat-progress-spinner>\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\" (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\" (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  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\">\n\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 matLine>\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\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;background:rgb(255,255,255)}.o-list-container .spinner-container.pageable-loading{background:rgba(255,255,255,.5)}.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
@@ -25366,7 +25405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
     }, propDecorators: { listItemDirectives: [{
                 type: ContentChildren,
                 args: [OListItemDirective]
-            }], refreshButton: [], selectable: [], odense: [], deleteButton: [], insertButtonFloatable: [], showButtonsText: [] } });
+            }], refreshButton: [], selectable: [], deleteButton: [], insertButtonFloatable: [], showButtonsText: [] } });
 class OListItemComponent {
     constructor(elRef, _renderer, _injector, cd, _list) {
@@ -25423,12 +25462,12 @@ class OListItemComponent {
     }
 }
 OListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: forwardRef(() => OListComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListItemComponent, selector: "o-list-item", host: { properties: { "class.o-list-item": "true" } }, queries: [{ propertyName: "_lines", predicate: MatListItemLine, descendants: true }, { propertyName: "_titles", predicate: MatListItemTitle, descendants: true }], viewQueries: [{ propertyName: "_innerListItem", first: true, predicate: ["innerListItem"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-item #innerListItem>\n  <div class=\"o-list-row-action o-list-item-selection-check\" *ngIf=\"_list && _list.selectable\">\n    <mat-checkbox [checked]=\"isSelected\" (change)=\"onCheckboxChange()\" (click)=\"onCheckboxClicked($event)\"></mat-checkbox>\n  </div>\n  <ng-content select=\"[o-list-item-avatar], [matListAvatar], [matListIcon]\"> </ng-content>\n  <div class=\"mat-mdc-list-item\">\n    <ng-content select=\"[matLine]\"></ng-content>\n  </div>\n  <!--matListItemMeta to put content into the meta section of a list item-->\n  <div matListItemMeta>\n    <ng-content select=\"o-list-item-card-image,o-list-item-card\"></ng-content>\n  </div>\n  <ng-content select=\"o-list-item-text,o-list-item-avatar, [o-list-item]\"></ng-content>\n\n  <div fxLayout=\"row\" class=\"row-buttons-container\">\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.editButtonInRow\" (click)=\"onEditIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.editButtonInRowIcon }}</mat-icon>\n    </div>\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.detailButtonInRow\" (click)=\"onDetailIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.detailButtonInRowIcon }}</mat-icon>\n    </div>\n  </div>\n</mat-list-item>\n", styles: [".o-list-item{display:flex}.o-list-item .mat-mdc-list-item{width:100%}.o-list-item .mat-mdc-list-item .row-buttons-container .o-list-row-action{height:24px;text-align:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: 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: "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.MatListItemMeta, selector: "[matListItemMeta]" }], encapsulation: i0.ViewEncapsulation.None });
+OListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListItemComponent, selector: "o-list-item", host: { properties: { "class.o-list-item": "true" } }, queries: [{ propertyName: "_lines", predicate: MatListItemLine, descendants: true }, { propertyName: "_titles", predicate: MatListItemTitle, descendants: true }], viewQueries: [{ propertyName: "_innerListItem", first: true, predicate: ["innerListItem"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-item #innerListItem>\n  <div class=\"o-list-row-action o-list-item-selection-check\" *ngIf=\"_list && _list.selectable\">\n    <mat-checkbox [checked]=\"isSelected\" (change)=\"onCheckboxChange()\" (click)=\"onCheckboxClicked($event)\"></mat-checkbox>\n  </div>\n  <ng-content select=\"[o-list-item-avatar], [matListAvatar], [matListIcon]\"> </ng-content>\n  <div class=\"mat-mdc-list-item\">\n    <ng-content select=\"[matLine]\"></ng-content>\n  </div>\n  <!--matListItemMeta to put content into the meta section of a list item-->\n  <div matListItemMeta>\n    <ng-content select=\"o-list-item-card-image,o-list-item-card\"></ng-content>\n  </div>\n  <ng-content select=\"o-list-item-text,o-list-item-avatar, [o-list-item]\"></ng-content>\n\n  <div fxLayout=\"row\" class=\"row-buttons-container\">\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.editButtonInRow\" (click)=\"onEditIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.editButtonInRowIcon }}</mat-icon>\n    </div>\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.detailButtonInRow\" (click)=\"onDetailIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.detailButtonInRowIcon }}</mat-icon>\n    </div>\n  </div>\n</mat-list-item>\n", styles: [".o-list-item{display:flex}.o-list-item .o-card-item{padding:8px 4px}.o-list-item .mat-mdc-list-item{width:100%}.o-list-item .mat-mdc-list-item.mdc-list-item--with-trailing-meta{height:auto}.o-list-item .mat-mdc-list-item .row-buttons-container .o-list-row-action{height:24px;text-align:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: 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: "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.MatListItemMeta, selector: "[matListItemMeta]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-list-item', encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-list-item]': 'true'
-                    }, template: "<mat-list-item #innerListItem>\n  <div class=\"o-list-row-action o-list-item-selection-check\" *ngIf=\"_list && _list.selectable\">\n    <mat-checkbox [checked]=\"isSelected\" (change)=\"onCheckboxChange()\" (click)=\"onCheckboxClicked($event)\"></mat-checkbox>\n  </div>\n  <ng-content select=\"[o-list-item-avatar], [matListAvatar], [matListIcon]\"> </ng-content>\n  <div class=\"mat-mdc-list-item\">\n    <ng-content select=\"[matLine]\"></ng-content>\n  </div>\n  <!--matListItemMeta to put content into the meta section of a list item-->\n  <div matListItemMeta>\n    <ng-content select=\"o-list-item-card-image,o-list-item-card\"></ng-content>\n  </div>\n  <ng-content select=\"o-list-item-text,o-list-item-avatar, [o-list-item]\"></ng-content>\n\n  <div fxLayout=\"row\" class=\"row-buttons-container\">\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.editButtonInRow\" (click)=\"onEditIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.editButtonInRowIcon }}</mat-icon>\n    </div>\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.detailButtonInRow\" (click)=\"onDetailIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.detailButtonInRowIcon }}</mat-icon>\n    </div>\n  </div>\n</mat-list-item>\n", styles: [".o-list-item{display:flex}.o-list-item .mat-mdc-list-item{width:100%}.o-list-item .mat-mdc-list-item .row-buttons-container .o-list-row-action{height:24px;text-align:center;cursor:pointer}\n"] }]
+                    }, template: "<mat-list-item #innerListItem>\n  <div class=\"o-list-row-action o-list-item-selection-check\" *ngIf=\"_list && _list.selectable\">\n    <mat-checkbox [checked]=\"isSelected\" (change)=\"onCheckboxChange()\" (click)=\"onCheckboxClicked($event)\"></mat-checkbox>\n  </div>\n  <ng-content select=\"[o-list-item-avatar], [matListAvatar], [matListIcon]\"> </ng-content>\n  <div class=\"mat-mdc-list-item\">\n    <ng-content select=\"[matLine]\"></ng-content>\n  </div>\n  <!--matListItemMeta to put content into the meta section of a list item-->\n  <div matListItemMeta>\n    <ng-content select=\"o-list-item-card-image,o-list-item-card\"></ng-content>\n  </div>\n  <ng-content select=\"o-list-item-text,o-list-item-avatar, [o-list-item]\"></ng-content>\n\n  <div fxLayout=\"row\" class=\"row-buttons-container\">\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.editButtonInRow\" (click)=\"onEditIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.editButtonInRowIcon }}</mat-icon>\n    </div>\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.detailButtonInRow\" (click)=\"onDetailIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.detailButtonInRowIcon }}</mat-icon>\n    </div>\n  </div>\n</mat-list-item>\n", styles: [".o-list-item{display:flex}.o-list-item .o-card-item{padding:8px 4px}.o-list-item .mat-mdc-list-item{width:100%}.o-list-item .mat-mdc-list-item.mdc-list-item--with-trailing-meta{height:auto}.o-list-item .mat-mdc-list-item .row-buttons-container .o-list-row-action{height:24px;text-align:center;cursor:pointer}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: OListComponent, decorators: [{
                         type: Optional
@@ -25721,7 +25760,7 @@ class OListItemCardImageComponent extends OListItemCardRenderer {
     }
 }
 OListItemCardImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OListItemCardImageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: forwardRef(() => OListItemComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OListItemCardImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListItemCardImageComponent, selector: "o-list-item-card-image", inputs: { content: "content", avatar: "avatar", icon: "icon", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { onIconClick: "icon-action" }, host: { properties: { "class.o-custom-list-item": "true", "class.o-list-item-card-image": "true" } }, usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"outlined\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-item-card\" [class.small]=\"compareListHeight('small')\"\n  [class.medium]=\"compareListHeight('medium')\" [class.large]=\"compareListHeight('large')\">\n\n  <mat-card-header *ngIf=\"avatar !== undefined\">\n    <img mat-card-avatar src=\"{{ avatar }}\" alt=\"avatar image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-header>\n\n  <img *ngIf=\"image !== undefined\" mat-card-image src=\"{{ image }}\" [class.exists-action-button]=\"icon !== undefined\" alt=\"card image\">\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && compareListHeight('small')\" mat-mini-fab (click)=\"onActionIconClick($event)\"\n    class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && (compareListHeight('medium') || compareListHeight('large'))\" mat-fab\n    (click)=\"onActionIconClick($event)\" class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <mat-card-title *ngIf=\"avatar === undefined && title !== undefined\"> {{ title }}</mat-card-title>\n  <mat-card-subtitle *ngIf=\"avatar === undefined && subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n\n  <mat-card-content *ngIf=\"!collapsible\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n\n    <div class=\"collapse-button-container\">\n      <button type=\"button\" mat-icon-button *ngIf=\"collapsible\" (click)=\"collapsed = !collapsed\" class=\"collapse-button\">\n        <mat-icon *ngIf=\"collapsed\" svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n        <mat-icon *ngIf=\"!collapsed\" svgIcon=\"ontimize:keyboard_arrow_up\"></mat-icon>\n      </button>\n    </div>\n  </mat-card-actions>\n\n  <mat-card-content *ngIf=\"collapsible && !collapsed\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card-image{padding:8px 0}.o-list-item-card-image .mat-mdc-card{padding:0 12px}.o-list-item-card-image .mat-mdc-card .mat-card-header .mat-card-title{margin-bottom:12px}.o-list-item-card-image .mat-mdc-card .mat-card-subtitle{margin-bottom:16px}.o-list-item-card-image .mat-mdc-card mat-card-actions,.o-list-item-card-image .mat-mdc-card mat-card-header,.o-list-item-card-image .mat-mdc-card mat-card-subtitle,.o-list-item-card-image .mat-mdc-card mat-card-title{width:100%}.o-list-item-card-image .mat-mdc-card .mat-mdc-card-content{padding:0}.o-list-item-card-image .mat-mdc-card.large{width:100%}.o-list-item-card-image .mat-mdc-card.medium{width:80%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small{width:60%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small img.exists-action-button{margin-bottom:-20px}.o-list-item-card-image .mat-mdc-card:not(.small):not(.medium):not(.large){width:100%}.o-list-item-card-image .mat-mdc-card .action-button{margin-left:auto}.o-list-item-card-image .mat-mdc-card img.exists-action-button{margin-bottom:-28px}.o-list-item-card-image .mat-mdc-card .collapse-button-container{flex:1 1 auto;position:relative}.o-list-item-card-image .mat-mdc-card .collapse-button-container .collapse-button{margin-left:calc(100% - 40px)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "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: "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: i4$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i4$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$4.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i4$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+OListItemCardImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListItemCardImageComponent, selector: "o-list-item-card-image", inputs: { content: "content", avatar: "avatar", icon: "icon", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { onIconClick: "icon-action" }, host: { properties: { "class.o-custom-list-item": "true", "class.o-list-item-card-image": "true" } }, usesInheritance: true, ngImport: i0, template: "<mat-card fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-item-card\" [class.small]=\"compareListHeight('small')\"\n  [class.medium]=\"compareListHeight('medium')\" [class.large]=\"compareListHeight('large')\">\n\n  <mat-card-header *ngIf=\"avatar !== undefined\">\n    <img mat-card-avatar src=\"{{ avatar }}\" alt=\"avatar image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-header>\n\n  <img *ngIf=\"image !== undefined\" mat-card-image src=\"{{ image }}\" [class.exists-action-button]=\"icon !== undefined\" alt=\"card image\">\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && compareListHeight('small')\" mat-mini-fab (click)=\"onActionIconClick($event)\"\n    class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && (compareListHeight('medium') || compareListHeight('large'))\" mat-fab\n    (click)=\"onActionIconClick($event)\" class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <mat-card-title *ngIf=\"avatar === undefined && title !== undefined\"> {{ title }}</mat-card-title>\n  <mat-card-subtitle *ngIf=\"avatar === undefined && subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n\n  <mat-card-content *ngIf=\"!collapsible\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n\n    <div class=\"collapse-button-container\">\n      <button type=\"button\" mat-icon-button *ngIf=\"collapsible\" (click)=\"collapsed = !collapsed\" class=\"collapse-button\">\n        <mat-icon *ngIf=\"collapsed\" svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n        <mat-icon *ngIf=\"!collapsed\" svgIcon=\"ontimize:keyboard_arrow_up\"></mat-icon>\n      </button>\n    </div>\n  </mat-card-actions>\n\n  <mat-card-content *ngIf=\"collapsible && !collapsed\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card-image .mat-mdc-card{padding:0 12px}.o-list-item-card-image .mat-mdc-card .mat-card-header .mat-card-title{margin-bottom:12px}.o-list-item-card-image .mat-mdc-card .mat-card-subtitle{margin-bottom:16px}.o-list-item-card-image .mat-mdc-card mat-card-actions,.o-list-item-card-image .mat-mdc-card mat-card-header,.o-list-item-card-image .mat-mdc-card mat-card-subtitle,.o-list-item-card-image .mat-mdc-card mat-card-title{width:100%}.o-list-item-card-image .mat-mdc-card .mat-mdc-card-content{padding:0}.o-list-item-card-image .mat-mdc-card.large{width:100%}.o-list-item-card-image .mat-mdc-card.medium{width:80%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small{width:60%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small img.exists-action-button{margin-bottom:-20px}.o-list-item-card-image .mat-mdc-card:not(.small):not(.medium):not(.large){width:100%}.o-list-item-card-image .mat-mdc-card .action-button{margin-left:auto}.o-list-item-card-image .mat-mdc-card img.exists-action-button{margin-bottom:-28px}.o-list-item-card-image .mat-mdc-card .collapse-button-container{flex:1 1 auto;position:relative}.o-list-item-card-image .mat-mdc-card .collapse-button-container .collapse-button{margin-left:calc(100% - 40px)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "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: "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: i4$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i4$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$4.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i4$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -25735,7 +25774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             args: [{ selector: 'o-list-item-card-image', inputs: DEFAULT_INPUTS_O_LIST_ITEM_CARD_IMAGE, outputs: DEFAULT_OUTPUTS_O_LIST_ITEM_CARD_IMAGE, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-custom-list-item]': 'true',
                         '[class.o-list-item-card-image]': 'true'
-                    }, template: "<mat-card appearance=\"outlined\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-item-card\" [class.small]=\"compareListHeight('small')\"\n  [class.medium]=\"compareListHeight('medium')\" [class.large]=\"compareListHeight('large')\">\n\n  <mat-card-header *ngIf=\"avatar !== undefined\">\n    <img mat-card-avatar src=\"{{ avatar }}\" alt=\"avatar image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-header>\n\n  <img *ngIf=\"image !== undefined\" mat-card-image src=\"{{ image }}\" [class.exists-action-button]=\"icon !== undefined\" alt=\"card image\">\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && compareListHeight('small')\" mat-mini-fab (click)=\"onActionIconClick($event)\"\n    class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && (compareListHeight('medium') || compareListHeight('large'))\" mat-fab\n    (click)=\"onActionIconClick($event)\" class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <mat-card-title *ngIf=\"avatar === undefined && title !== undefined\"> {{ title }}</mat-card-title>\n  <mat-card-subtitle *ngIf=\"avatar === undefined && subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n\n  <mat-card-content *ngIf=\"!collapsible\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n\n    <div class=\"collapse-button-container\">\n      <button type=\"button\" mat-icon-button *ngIf=\"collapsible\" (click)=\"collapsed = !collapsed\" class=\"collapse-button\">\n        <mat-icon *ngIf=\"collapsed\" svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n        <mat-icon *ngIf=\"!collapsed\" svgIcon=\"ontimize:keyboard_arrow_up\"></mat-icon>\n      </button>\n    </div>\n  </mat-card-actions>\n\n  <mat-card-content *ngIf=\"collapsible && !collapsed\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card-image{padding:8px 0}.o-list-item-card-image .mat-mdc-card{padding:0 12px}.o-list-item-card-image .mat-mdc-card .mat-card-header .mat-card-title{margin-bottom:12px}.o-list-item-card-image .mat-mdc-card .mat-card-subtitle{margin-bottom:16px}.o-list-item-card-image .mat-mdc-card mat-card-actions,.o-list-item-card-image .mat-mdc-card mat-card-header,.o-list-item-card-image .mat-mdc-card mat-card-subtitle,.o-list-item-card-image .mat-mdc-card mat-card-title{width:100%}.o-list-item-card-image .mat-mdc-card .mat-mdc-card-content{padding:0}.o-list-item-card-image .mat-mdc-card.large{width:100%}.o-list-item-card-image .mat-mdc-card.medium{width:80%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small{width:60%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small img.exists-action-button{margin-bottom:-20px}.o-list-item-card-image .mat-mdc-card:not(.small):not(.medium):not(.large){width:100%}.o-list-item-card-image .mat-mdc-card .action-button{margin-left:auto}.o-list-item-card-image .mat-mdc-card img.exists-action-button{margin-bottom:-28px}.o-list-item-card-image .mat-mdc-card .collapse-button-container{flex:1 1 auto;position:relative}.o-list-item-card-image .mat-mdc-card .collapse-button-container .collapse-button{margin-left:calc(100% - 40px)}\n"] }]
+                    }, template: "<mat-card fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-item-card\" [class.small]=\"compareListHeight('small')\"\n  [class.medium]=\"compareListHeight('medium')\" [class.large]=\"compareListHeight('large')\">\n\n  <mat-card-header *ngIf=\"avatar !== undefined\">\n    <img mat-card-avatar src=\"{{ avatar }}\" alt=\"avatar image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-header>\n\n  <img *ngIf=\"image !== undefined\" mat-card-image src=\"{{ image }}\" [class.exists-action-button]=\"icon !== undefined\" alt=\"card image\">\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && compareListHeight('small')\" mat-mini-fab (click)=\"onActionIconClick($event)\"\n    class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <button type=\"button\" *ngIf=\"icon !== undefined && (compareListHeight('medium') || compareListHeight('large'))\" mat-fab\n    (click)=\"onActionIconClick($event)\" class=\"action-button\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n\n  <mat-card-title *ngIf=\"avatar === undefined && title !== undefined\"> {{ title }}</mat-card-title>\n  <mat-card-subtitle *ngIf=\"avatar === undefined && subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n\n  <mat-card-content *ngIf=\"!collapsible\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n\n    <div class=\"collapse-button-container\">\n      <button type=\"button\" mat-icon-button *ngIf=\"collapsible\" (click)=\"collapsed = !collapsed\" class=\"collapse-button\">\n        <mat-icon *ngIf=\"collapsed\" svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n        <mat-icon *ngIf=\"!collapsed\" svgIcon=\"ontimize:keyboard_arrow_up\"></mat-icon>\n      </button>\n    </div>\n  </mat-card-actions>\n\n  <mat-card-content *ngIf=\"collapsible && !collapsed\">\n    <p>\n      {{ content }}\n    </p>\n  </mat-card-content>\n\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card-image .mat-mdc-card{padding:0 12px}.o-list-item-card-image .mat-mdc-card .mat-card-header .mat-card-title{margin-bottom:12px}.o-list-item-card-image .mat-mdc-card .mat-card-subtitle{margin-bottom:16px}.o-list-item-card-image .mat-mdc-card mat-card-actions,.o-list-item-card-image .mat-mdc-card mat-card-header,.o-list-item-card-image .mat-mdc-card mat-card-subtitle,.o-list-item-card-image .mat-mdc-card mat-card-title{width:100%}.o-list-item-card-image .mat-mdc-card .mat-mdc-card-content{padding:0}.o-list-item-card-image .mat-mdc-card.large{width:100%}.o-list-item-card-image .mat-mdc-card.medium{width:80%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small{width:60%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small img.exists-action-button{margin-bottom:-20px}.o-list-item-card-image .mat-mdc-card:not(.small):not(.medium):not(.large){width:100%}.o-list-item-card-image .mat-mdc-card .action-button{margin-left:auto}.o-list-item-card-image .mat-mdc-card img.exists-action-button{margin-bottom:-28px}.o-list-item-card-image .mat-mdc-card .collapse-button-container{flex:1 1 auto;position:relative}.o-list-item-card-image .mat-mdc-card .collapse-button-container .collapse-button{margin-left:calc(100% - 40px)}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: OListItemComponent, decorators: [{
                         type: Optional
@@ -25754,13 +25793,13 @@ class OListItemCardComponent extends OListItemCardRenderer {
     }
 }
 OListItemCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OListItemCardComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: forwardRef(() => OListItemComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OListItemCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListItemCardComponent, selector: "o-list-item-card", host: { properties: { "class.o-custom-list-item": "true", "class.o-list-item-card": "true" } }, usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"outlined\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-card-title-group>\n    <img *ngIf=\"showImage\" src=\"{{ image }}\" [class.mat-mdc-card-sm-image]=\"compareListHeight('small')\" [class.mat-mdc-card-md-image]=\"compareListHeight('medium')\"\n      [class.mat-mdc-card-lg-image]=\"compareListHeight('large')\" alt=\"card title image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-title-group>\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta{height:auto}.mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card{padding:8px 0}.o-list-item-card .mat-mdc-card{padding:16px}.o-list-item-card mat-card,.o-list-item-card mat-card-actions,.o-list-item-card mat-card-title-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "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: "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$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4$4.MatCardTitleGroup, selector: "mat-card-title-group" }], encapsulation: i0.ViewEncapsulation.None });
+OListItemCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OListItemCardComponent, selector: "o-list-item-card", host: { properties: { "class.o-custom-list-item": "true", "class.o-list-item-card": "true" } }, usesInheritance: true, ngImport: i0, template: "<mat-card fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-card-title-group>\n    <img *ngIf=\"showImage\" src=\"{{ image }}\" [class.mat-mdc-card-sm-image]=\"compareListHeight('small')\"\n      [class.mat-mdc-card-md-image]=\"compareListHeight('medium')\" [class.mat-mdc-card-lg-image]=\"compareListHeight('large')\" alt=\"card title image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-title-group>\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card .mat-mdc-card{padding:16px 16px 0}.o-list-item-card mat-card,.o-list-item-card mat-card-actions,.o-list-item-card mat-card-title-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "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: "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$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4$4.MatCardTitleGroup, selector: "mat-card-title-group" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OListItemCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-list-item-card', encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-custom-list-item]': 'true',
                         '[class.o-list-item-card]': 'true'
-                    }, template: "<mat-card appearance=\"outlined\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-card-title-group>\n    <img *ngIf=\"showImage\" src=\"{{ image }}\" [class.mat-mdc-card-sm-image]=\"compareListHeight('small')\" [class.mat-mdc-card-md-image]=\"compareListHeight('medium')\"\n      [class.mat-mdc-card-lg-image]=\"compareListHeight('large')\" alt=\"card title image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-title-group>\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta{height:auto}.mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card{padding:8px 0}.o-list-item-card .mat-mdc-card{padding:16px}.o-list-item-card mat-card,.o-list-item-card mat-card-actions,.o-list-item-card mat-card-title-group{width:100%}\n"] }]
+                    }, template: "<mat-card fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <mat-card-title-group>\n    <img *ngIf=\"showImage\" src=\"{{ image }}\" [class.mat-mdc-card-sm-image]=\"compareListHeight('small')\"\n      [class.mat-mdc-card-md-image]=\"compareListHeight('medium')\" [class.mat-mdc-card-lg-image]=\"compareListHeight('large')\" alt=\"card title image\">\n    <mat-card-title *ngIf=\"title !== undefined\"> {{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle !== undefined\"> {{ subtitle }}</mat-card-subtitle>\n  </mat-card-title-group>\n  <mat-card-actions>\n    <button type=\"button\" mat-button *ngIf=\"action1Text !== undefined\" (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    <button type=\"button\" mat-button *ngIf=\"action2Text !== undefined\" (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card .mat-mdc-card{padding:16px 16px 0}.o-list-item-card mat-card,.o-list-item-card mat-card-actions,.o-list-item-card mat-card-title-group{width:100%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: OListItemComponent, decorators: [{
                         type: Optional
@@ -26007,12 +26046,12 @@ class ODualListSelectorComponent {
     }
 }
 ODualListSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ODualListSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ODualListSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ODualListSelectorComponent, selector: "o-dual-list-selector", inputs: { key: "key", display: "display", dataSource: ["data-source", "dataSource"], dataDestination: ["data-destination", "dataDestination"], titleListDataSource: ["title-list-data-source", "titleListDataSource"], titleListDataDestination: ["title-list-data-destination", "titleListDataDestination"], groupedColumnTypes: ["grouped-column-types", "groupedColumnTypes"], description: "description" }, host: { properties: { "class.o-dual-list-selector": "true" } }, ngImport: i0, template: "<div mat-subheader>{{description | oTranslate }} </div>\n\n<div class=\"o-dual-list-selector-wrapper-selector-list\">\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-source-wrapper\">\n      <mat-selection-list fxFlex dense cdkDropList id=\"item-source-list\" #itemsList [cdkDropListData]=\"dataSource\"\n        [cdkDropListConnectedTo]=\"['item-destination-list']\" (cdkDropListDropped)=\"drop($event)\" cdkDropListSortingDisabled>\n\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(itemsList) : null\" [checked]=\"isAllSelected(itemsList)\"\n            [indeterminate]=\"hasValue(itemsList)  && !isAllSelected(itemsList)\" fxFlex>\n            <span fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataSource | oTranslate }}</span>\n              <span>{{ getCheckboxLabel(itemsList) }} </span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let item of dataSource\" [value]=\"item\" cdkDrag class=\"o-drag-list-item-box\">\n          <span matListItemLine>{{ (item[display]) | oTranslate }} </span>\n        </mat-list-option>\n      </mat-selection-list>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab (click)=\"addToGroupedColumns(itemsList)\" [disabled]=\"itemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button mat-mini-fab (click)=\"removeGroupedColumns(selectedItemsList)\" [disabled]=\"selectedItemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-destination-wrapper\">\n      <mat-selection-list fxFlex dense cdkDropList id=\"item-destination-list\" #selectedItemsList [cdkDropListData]=\"dataDestination\"\n        [cdkDropListConnectedTo]=\"['item-source-list']\" (cdkDropListDropped)=\"drop($event)\">\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(selectedItemsList) : null\" [checked]=\"isAllSelected(selectedItemsList)\"\n            [indeterminate]=\"hasValue(selectedItemsList) && !isAllSelected(selectedItemsList)\" fxFlex>\n            <span fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataDestination | oTranslate}}</span>\n              <span>{{ getCheckboxLabel(selectedItemsList) }}</span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let itemSelected of dataDestination\" [value]=\"itemSelected\" cdkDrag\n          class=\"o-drag-list-item-box\">\n\n          <ng-container *ngIf=\"itemSelected.type === 'date'; else defaultRenderer\">\n            <o-dual-list-selector-date-item [item]=itemSelected.attr [grouped-date-columns]=\"groupedColumnTypes\"></o-dual-list-selector-date-item>\n          </ng-container>\n\n          <ng-template #defaultRenderer>\n            <span matListItemLine>{{ itemSelected[display] | oTranslate }} </span>\n          </ng-template>\n\n        </mat-list-option>\n\n        <div class=\"mat-caption drop-empty-message\" *ngIf=\"dataDestination.length===0\">\n          {{ 'DUAL_LIST_SELECTOR.DROP_EMPTY_MESSAGE' | oTranslate }}\n        </div>\n      </mat-selection-list>\n\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab [disabled]=\"isDisabledSortAsc(selectedItemsList)\" (click)=\"sortAscSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_less</mat-icon>\n        </button>\n        <button mat-mini-fab [disabled]=\"isDisabledSortDesc(selectedItemsList)\" (click)=\"sortDescSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".o-dual-list-selector{width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list{flex:1}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-destination-wrapper,.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-source-wrapper{overflow:auto}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-mini-fab{line-height:14px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-mini-fab .mat-icon{font-size:18px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base{overflow-y:scroll;width:100%;position:relative;border-radius:4px;padding:16px}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option){margin:0}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option) .mat-mdc-list-item-line{font-weight:500}.o-dual-list-selector .o-dual-list-selector-list .mat-list-option.cdk-drag.o-drag-list-item-box .mdc-list-item__content{cursor:move}.o-dual-list-selector .o-dual-list-selector-list .drop-empty-message{position:absolute;width:calc(100% - 16px);text-align:center;opacity:.5;top:50%}\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.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: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", 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: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i7$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ODualListSelectorDateItemComponent, selector: "o-dual-list-selector-date-item", inputs: ["item", "grouped-date-columns"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ODualListSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ODualListSelectorComponent, selector: "o-dual-list-selector", inputs: { key: "key", display: "display", dataSource: ["data-source", "dataSource"], dataDestination: ["data-destination", "dataDestination"], titleListDataSource: ["title-list-data-source", "titleListDataSource"], titleListDataDestination: ["title-list-data-destination", "titleListDataDestination"], groupedColumnTypes: ["grouped-column-types", "groupedColumnTypes"], description: "description" }, host: { properties: { "class.o-dual-list-selector": "true" } }, ngImport: i0, template: "<div mat-subheader>{{description | oTranslate }} </div>\n\n<div class=\"o-dual-list-selector-wrapper-selector-list\">\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-source-wrapper\">\n      <mat-selection-list fxFlex cdkDropList id=\"item-source-list\" #itemsList [cdkDropListData]=\"dataSource\"\n        [cdkDropListConnectedTo]=\"['item-destination-list']\" (cdkDropListDropped)=\"drop($event)\" cdkDropListSortingDisabled>\n\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(itemsList) : null\" [checked]=\"isAllSelected(itemsList)\"\n            [indeterminate]=\"hasValue(itemsList)  && !isAllSelected(itemsList)\" fxFlex>\n            <span fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataSource | oTranslate }}</span>\n              <span>{{ getCheckboxLabel(itemsList) }} </span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let item of dataSource\" [value]=\"item\" cdkDrag class=\"o-drag-list-item-box\">\n          <span matListItemLine>{{ (item[display]) | oTranslate }} </span>\n        </mat-list-option>\n      </mat-selection-list>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab (click)=\"addToGroupedColumns(itemsList)\" [disabled]=\"itemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button mat-mini-fab (click)=\"removeGroupedColumns(selectedItemsList)\" [disabled]=\"selectedItemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-destination-wrapper\">\n      <mat-selection-list fxFlex cdkDropList id=\"item-destination-list\" #selectedItemsList [cdkDropListData]=\"dataDestination\"\n        [cdkDropListConnectedTo]=\"['item-source-list']\" (cdkDropListDropped)=\"drop($event)\">\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(selectedItemsList) : null\" [checked]=\"isAllSelected(selectedItemsList)\"\n            [indeterminate]=\"hasValue(selectedItemsList) && !isAllSelected(selectedItemsList)\" fxFlex>\n            <span fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataDestination | oTranslate}}</span>\n              <span>{{ getCheckboxLabel(selectedItemsList) }}</span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let itemSelected of dataDestination\" [value]=\"itemSelected\" cdkDrag\n          class=\"o-drag-list-item-box\">\n\n          <ng-container *ngIf=\"itemSelected.type === 'date'; else defaultRenderer\">\n            <o-dual-list-selector-date-item [item]=itemSelected.attr [grouped-date-columns]=\"groupedColumnTypes\" ></o-dual-list-selector-date-item>\n          </ng-container>\n\n          <ng-template #defaultRenderer>\n            <span matListItemLine>{{ itemSelected[display] | oTranslate }} </span>\n          </ng-template>\n\n        </mat-list-option>\n\n        <div class=\"mat-caption drop-empty-message\" *ngIf=\"dataDestination.length===0\">\n          {{ 'DUAL_LIST_SELECTOR.DROP_EMPTY_MESSAGE' | oTranslate }}\n        </div>\n      </mat-selection-list>\n\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab [disabled]=\"isDisabledSortAsc(selectedItemsList)\" (click)=\"sortAscSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_less</mat-icon>\n        </button>\n        <button mat-mini-fab [disabled]=\"isDisabledSortDesc(selectedItemsList)\" (click)=\"sortDescSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".o-dual-list-selector{width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list{flex:1}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-destination-wrapper,.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-source-wrapper{overflow:auto}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-mini-fab{line-height:14px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-mini-fab .mat-icon{font-size:18px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base{overflow-y:auto;width:100%;position:relative;border-radius:4px;padding:0 16px 16px}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option){margin:0}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option) .mat-mdc-list-item-line{font-weight:500}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .mat-list-option.cdk-drag.o-drag-list-item-box .mdc-list-item__content{cursor:move}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .drop-empty-message{position:absolute;width:calc(100% - 16px);text-align:center;opacity:.5;top:50%}\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.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: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", 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: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i7$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ODualListSelectorDateItemComponent, selector: "o-dual-list-selector-date-item", inputs: ["item", "grouped-date-columns"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ODualListSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-dual-list-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: DEFAULT_DUAL_LIST_SELECTOR, host: {
                         '[class.o-dual-list-selector]': 'true'
-                    }, template: "<div mat-subheader>{{description | oTranslate }} </div>\n\n<div class=\"o-dual-list-selector-wrapper-selector-list\">\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-source-wrapper\">\n      <mat-selection-list fxFlex dense cdkDropList id=\"item-source-list\" #itemsList [cdkDropListData]=\"dataSource\"\n        [cdkDropListConnectedTo]=\"['item-destination-list']\" (cdkDropListDropped)=\"drop($event)\" cdkDropListSortingDisabled>\n\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(itemsList) : null\" [checked]=\"isAllSelected(itemsList)\"\n            [indeterminate]=\"hasValue(itemsList)  && !isAllSelected(itemsList)\" fxFlex>\n            <span fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataSource | oTranslate }}</span>\n              <span>{{ getCheckboxLabel(itemsList) }} </span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let item of dataSource\" [value]=\"item\" cdkDrag class=\"o-drag-list-item-box\">\n          <span matListItemLine>{{ (item[display]) | oTranslate }} </span>\n        </mat-list-option>\n      </mat-selection-list>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab (click)=\"addToGroupedColumns(itemsList)\" [disabled]=\"itemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button mat-mini-fab (click)=\"removeGroupedColumns(selectedItemsList)\" [disabled]=\"selectedItemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-destination-wrapper\">\n      <mat-selection-list fxFlex dense cdkDropList id=\"item-destination-list\" #selectedItemsList [cdkDropListData]=\"dataDestination\"\n        [cdkDropListConnectedTo]=\"['item-source-list']\" (cdkDropListDropped)=\"drop($event)\">\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(selectedItemsList) : null\" [checked]=\"isAllSelected(selectedItemsList)\"\n            [indeterminate]=\"hasValue(selectedItemsList) && !isAllSelected(selectedItemsList)\" fxFlex>\n            <span fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataDestination | oTranslate}}</span>\n              <span>{{ getCheckboxLabel(selectedItemsList) }}</span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let itemSelected of dataDestination\" [value]=\"itemSelected\" cdkDrag\n          class=\"o-drag-list-item-box\">\n\n          <ng-container *ngIf=\"itemSelected.type === 'date'; else defaultRenderer\">\n            <o-dual-list-selector-date-item [item]=itemSelected.attr [grouped-date-columns]=\"groupedColumnTypes\"></o-dual-list-selector-date-item>\n          </ng-container>\n\n          <ng-template #defaultRenderer>\n            <span matListItemLine>{{ itemSelected[display] | oTranslate }} </span>\n          </ng-template>\n\n        </mat-list-option>\n\n        <div class=\"mat-caption drop-empty-message\" *ngIf=\"dataDestination.length===0\">\n          {{ 'DUAL_LIST_SELECTOR.DROP_EMPTY_MESSAGE' | oTranslate }}\n        </div>\n      </mat-selection-list>\n\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab [disabled]=\"isDisabledSortAsc(selectedItemsList)\" (click)=\"sortAscSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_less</mat-icon>\n        </button>\n        <button mat-mini-fab [disabled]=\"isDisabledSortDesc(selectedItemsList)\" (click)=\"sortDescSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".o-dual-list-selector{width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list{flex:1}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-destination-wrapper,.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-source-wrapper{overflow:auto}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-mini-fab{line-height:14px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-mini-fab .mat-icon{font-size:18px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base{overflow-y:scroll;width:100%;position:relative;border-radius:4px;padding:16px}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option){margin:0}.o-dual-list-selector .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option) .mat-mdc-list-item-line{font-weight:500}.o-dual-list-selector .o-dual-list-selector-list .mat-list-option.cdk-drag.o-drag-list-item-box .mdc-list-item__content{cursor:move}.o-dual-list-selector .o-dual-list-selector-list .drop-empty-message{position:absolute;width:calc(100% - 16px);text-align:center;opacity:.5;top:50%}\n"] }]
+                    }, template: "<div mat-subheader>{{description | oTranslate }} </div>\n\n<div class=\"o-dual-list-selector-wrapper-selector-list\">\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-source-wrapper\">\n      <mat-selection-list fxFlex cdkDropList id=\"item-source-list\" #itemsList [cdkDropListData]=\"dataSource\"\n        [cdkDropListConnectedTo]=\"['item-destination-list']\" (cdkDropListDropped)=\"drop($event)\" cdkDropListSortingDisabled>\n\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(itemsList) : null\" [checked]=\"isAllSelected(itemsList)\"\n            [indeterminate]=\"hasValue(itemsList)  && !isAllSelected(itemsList)\" fxFlex>\n            <span fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataSource | oTranslate }}</span>\n              <span>{{ getCheckboxLabel(itemsList) }} </span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let item of dataSource\" [value]=\"item\" cdkDrag class=\"o-drag-list-item-box\">\n          <span matListItemLine>{{ (item[display]) | oTranslate }} </span>\n        </mat-list-option>\n      </mat-selection-list>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab (click)=\"addToGroupedColumns(itemsList)\" [disabled]=\"itemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button mat-mini-fab (click)=\"removeGroupedColumns(selectedItemsList)\" [disabled]=\"selectedItemsList.selectedOptions.selected.length===0\">\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"o-dual-list-selector-list\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxFlex=\"50%\">\n    <div fxLayout=\"row\" fxFlex class=\"o-dual-list-selector-destination-wrapper\">\n      <mat-selection-list fxFlex cdkDropList id=\"item-destination-list\" #selectedItemsList [cdkDropListData]=\"dataDestination\"\n        [cdkDropListConnectedTo]=\"['item-source-list']\" (cdkDropListDropped)=\"drop($event)\">\n        <mat-list-item>\n          <mat-checkbox (change)=\"$event ? masterToggle(selectedItemsList) : null\" [checked]=\"isAllSelected(selectedItemsList)\"\n            [indeterminate]=\"hasValue(selectedItemsList) && !isAllSelected(selectedItemsList)\" fxFlex>\n            <span fxLayoutAlign=\"space-between center\">\n              <span>{{ titleListDataDestination | oTranslate}}</span>\n              <span>{{ getCheckboxLabel(selectedItemsList) }}</span>\n            </span>\n          </mat-checkbox>\n        </mat-list-item>\n\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let itemSelected of dataDestination\" [value]=\"itemSelected\" cdkDrag\n          class=\"o-drag-list-item-box\">\n\n          <ng-container *ngIf=\"itemSelected.type === 'date'; else defaultRenderer\">\n            <o-dual-list-selector-date-item [item]=itemSelected.attr [grouped-date-columns]=\"groupedColumnTypes\" ></o-dual-list-selector-date-item>\n          </ng-container>\n\n          <ng-template #defaultRenderer>\n            <span matListItemLine>{{ itemSelected[display] | oTranslate }} </span>\n          </ng-template>\n\n        </mat-list-option>\n\n        <div class=\"mat-caption drop-empty-message\" *ngIf=\"dataDestination.length===0\">\n          {{ 'DUAL_LIST_SELECTOR.DROP_EMPTY_MESSAGE' | oTranslate }}\n        </div>\n      </mat-selection-list>\n\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"50px\" fxLayoutGap=\"24px\">\n        <button mat-mini-fab [disabled]=\"isDisabledSortAsc(selectedItemsList)\" (click)=\"sortAscSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_less</mat-icon>\n        </button>\n        <button mat-mini-fab [disabled]=\"isDisabledSortDesc(selectedItemsList)\" (click)=\"sortDescSelectedItems(selectedItemsList)\">\n          <mat-icon>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".o-dual-list-selector{width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list{flex:1}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-destination-wrapper,.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-source-wrapper{overflow:auto}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-mini-fab{line-height:14px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-mini-fab .mat-icon{font-size:18px;height:18px;width:18px}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base{overflow-y:auto;width:100%;position:relative;border-radius:4px;padding:0 16px 16px}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option){margin:0}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .o-dual-list-selector-list .mat-mdc-selection-list.mat-mdc-list-base .mat-mdc-list-item.mat-mdc-list-item:not(.mat-mdc-list-option) .mat-mdc-list-item-line{font-weight:500}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .mat-list-option.cdk-drag.o-drag-list-item-box .mdc-list-item__content{cursor:move}.o-dual-list-selector .o-dual-list-selector-wrapper-selector-list .drop-empty-message{position:absolute;width:calc(100% - 16px);text-align:center;opacity:.5;top:50%}\n"] }]
         }] });
 class ODualListSelectorModule {
@@ -27409,12 +27448,12 @@ class OTableFilterByColumnDataDialogComponent {
     }
 }
 OTableFilterByColumnDataDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableFilterByColumnDataDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-OTableFilterByColumnDataDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableFilterByColumnDataDialogComponent, selector: "o-table-filter-by-column-data-dialog", host: { properties: { "class.o-filter-by-column-dialog": "true" } }, viewQueries: [{ propertyName: "filter", first: true, predicate: ["filter"], descendants: true }, { propertyName: "filterValueList", first: true, predicate: ["filterValueList"], descendants: true }], ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_BY_COLUMN' | oTranslate }}: {{ column.title | oTranslate }}</span>\n<div mat-dialog-content class=\"dialog-list-container\">\n  <div fxLayout=\"column\" class=\"content-wrapper\" [class.content-wrapper-fixed-dimension]=\"getFixedDimensionClass()\">\n    <mat-slide-toggle #customFilterSlide (change)=\"onSlideChange($event)\" [checked]=\"(isCustomFilter | async)\" *ngIf=\"isDefaultFilter | async\">\n      {{ 'TABLE.FILTER_BY_COLUMN.CUSTOM_FILTER' | oTranslate }}\n    </mat-slide-toggle>\n    <div fxFill *ngIf=\"!(isCustomFilter | async);else customFilterTemplate\" fxLayout=\"column\">\n      <mat-form-field class=\"hinted\">\n        <mat-icon matPrefix svgIcon=\"ontimize:search\"></mat-icon>\n        <input matInput #filter placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n        <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      </mat-form-field>\n      <div *ngIf=\"(listData | async).length > 0; else emptyListData\" fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start start\">\n          <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" [disabled]=\"!listData\"\n            class=\"select-all-checkbox\">\n            {{ 'TABLE.FILTER_BY_COLUMN.CHECK_ALL' | oTranslate }}\n          </mat-checkbox>\n          <span *ngIf=\"!listData\" class=\"column-filter-empty-list\">\n            {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY_FILTER' | oTranslate }}\n          </span>\n        </div>\n        <button type=\"button\" mat-icon-button (click)=\"onClickSortValues()\">\n          <mat-icon [svgIcon]=\"getSortByAlphaIcon()\"></mat-icon>\n        </button>\n      </div>\n\n      <ng-template #emptyListData>\n        <span class=\"column-filter-empty-list\">\n          {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY' | oTranslate }}\n        </span>\n      </ng-template>\n\n      <mat-selection-list *ngIf=\"preloadValues || listData\" #filterValueList class=\"select-values-list\" (selectionChange)=\"onSelect($event)\">\n        <mat-list-option *ngFor=\"let record of (listData | async); let i = index\" checkboxPosition=\"before\" [selected]=\"record.selected\"\n          [value]=\"record\">\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ record.value || ('TABLE.FILTER_BY_COLUMN.EMPTY_VALUE' | oTranslate) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{ cellvalue: record.value, rowvalue: record.rowValue }\">\n          </ng-template>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </div>\n</div>\n\n\n<mat-dialog-actions fxLayoutAlign=\"space-between center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"clearAction\" class=\"o-button-info\">\n    {{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate }} </button>\n  <span align=\"end\">\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"cancelAction\" class=\"o-button-default cancel\">\n      {{ 'CANCEL' | oTranslate }} </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"acceptAction\" class=\"o-button-primary\">\n      {{ 'ACCEPT' | oTranslate }} </button>\n  </span>\n</mat-dialog-actions>\n\n<!-- TEMPLATE CUSTOM FILTER-->\n<ng-template #customFilterTemplate>\n  <div *ngIf=\"isTextType()\">\n    <mat-form-field fxFlex class=\"hinted\">\n      <input matInput #filterText [formControl]=\"fcText\" placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n      <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n        <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n      </button>\n    </mat-form-field>\n  </div>\n  <div *ngIf=\"isNumericType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [formControl]=\"fcFrom\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [formControl]=\"fcTo\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n    </mat-form-field>\n    <button type=\"button\" mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n  <div *ngIf=\"isDateType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerFrom\" [max]=\"fcTo.value\" [formControl]=\"fcFrom\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerFrom\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerFrom [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerTo\" [min]=\"fcFrom.value\" [formControl]=\"fcTo\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerTo\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerTo [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n\n</ng-template>\n", styles: [".o-filter-by-column-dialog .mat-mdc-slide-toggle{padding-bottom:24px;padding-left:14px}.o-filter-by-column-dialog .content-wrapper{padding:24px 0 12px;margin:0}.o-filter-by-column-dialog .content-wrapper.content-wrapper-fixed-dimension{max-height:430px;min-height:430px;min-width:250px;width:100%}.o-filter-by-column-dialog .content-wrapper .mat-mdc-form-field.hinted{margin-bottom:24px}.o-filter-by-column-dialog .content-wrapper .select-all-checkbox{padding-bottom:6px}.o-filter-by-column-dialog .content-wrapper .select-values-list{padding-top:0;overflow-y:auto;overflow-x:hidden;outline:none}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item{height:30px}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item .mat-icon{font-size:24px}.o-filter-by-column-dialog .content-wrapper .column-filter-empty-list{text-align:center}\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.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.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: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i7$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableFilterByColumnDataDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableFilterByColumnDataDialogComponent, selector: "o-table-filter-by-column-data-dialog", host: { properties: { "class.o-filter-by-column-dialog": "true" } }, viewQueries: [{ propertyName: "filter", first: true, predicate: ["filter"], descendants: true }, { propertyName: "filterValueList", first: true, predicate: ["filterValueList"], descendants: true }], ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_BY_COLUMN' | oTranslate }}: {{ column.title | oTranslate }}</span>\n<div mat-dialog-content class=\"dialog-list-container\">\n  <div fxLayout=\"column\" class=\"content-wrapper\" [class.content-wrapper-fixed-dimension]=\"getFixedDimensionClass()\">\n    <mat-slide-toggle #customFilterSlide (change)=\"onSlideChange($event)\" [checked]=\"(isCustomFilter | async)\" *ngIf=\"isDefaultFilter | async\">\n      {{ 'TABLE.FILTER_BY_COLUMN.CUSTOM_FILTER' | oTranslate }}\n    </mat-slide-toggle>\n    <div fxFill *ngIf=\"!(isCustomFilter | async);else customFilterTemplate\" fxLayout=\"column\">\n      <mat-form-field class=\"hinted\">\n        <mat-icon matPrefix svgIcon=\"ontimize:search\"></mat-icon>\n        <input matInput #filter placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n        <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      </mat-form-field>\n      <div *ngIf=\"(listData | async).length > 0; else emptyListData\" fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start start\">\n          <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" [disabled]=\"!listData\"\n            class=\"select-all-checkbox\">\n            {{ 'TABLE.FILTER_BY_COLUMN.CHECK_ALL' | oTranslate }}\n          </mat-checkbox>\n          <span *ngIf=\"!listData\" class=\"column-filter-empty-list\">\n            {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY_FILTER' | oTranslate }}\n          </span>\n        </div>\n        <button type=\"button\" mat-icon-button (click)=\"onClickSortValues()\">\n          <mat-icon [svgIcon]=\"getSortByAlphaIcon()\"></mat-icon>\n        </button>\n      </div>\n\n      <ng-template #emptyListData>\n        <span class=\"column-filter-empty-list\">\n          {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY' | oTranslate }}\n        </span>\n      </ng-template>\n\n      <mat-selection-list *ngIf=\"preloadValues || listData\" #filterValueList class=\"select-values-list\" (selectionChange)=\"onSelect($event)\">\n        <mat-list-option *ngFor=\"let record of (listData | async); let i = index\" checkboxPosition=\"before\" [selected]=\"record.selected\"\n          [value]=\"record\">\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ record.value || ('TABLE.FILTER_BY_COLUMN.EMPTY_VALUE' | oTranslate) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{ cellvalue: record.value, rowvalue: record.rowValue }\">\n          </ng-template>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </div>\n</div>\n\n\n<mat-dialog-actions fxLayoutAlign=\"space-between center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"clearAction\" class=\"o-button-info\">\n    {{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate }} </button>\n  <span align=\"end\">\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"cancelAction\" class=\"o-button-default cancel\">\n      {{ 'CANCEL' | oTranslate }} </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"acceptAction\" class=\"o-button-primary\">\n      {{ 'ACCEPT' | oTranslate }} </button>\n  </span>\n</mat-dialog-actions>\n\n<!-- TEMPLATE CUSTOM FILTER-->\n<ng-template #customFilterTemplate>\n  <div *ngIf=\"isTextType()\">\n    <mat-form-field fxFlex class=\"hinted\">\n      <input matInput #filterText [formControl]=\"fcText\" placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n      <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n        <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n      </button>\n    </mat-form-field>\n  </div>\n  <div *ngIf=\"isNumericType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [formControl]=\"fcFrom\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [formControl]=\"fcTo\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n    </mat-form-field>\n    <button type=\"button\" mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n  <div *ngIf=\"isDateType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerFrom\" [max]=\"fcTo.value\" [formControl]=\"fcFrom\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerFrom\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerFrom [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerTo\" [min]=\"fcFrom.value\" [formControl]=\"fcTo\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerTo\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerTo [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n\n</ng-template>\n", styles: [".o-filter-by-column-dialog .mat-mdc-slide-toggle{padding-bottom:24px;padding-left:14px}.o-filter-by-column-dialog .content-wrapper{padding:24px 0 12px;margin:0}.o-filter-by-column-dialog .content-wrapper.content-wrapper-fixed-dimension{max-height:430px;min-height:430px;min-width:250px;width:100%}.o-filter-by-column-dialog .content-wrapper .mat-mdc-form-field.hinted{margin-bottom:24px}.o-filter-by-column-dialog .content-wrapper .select-values-list{padding-top:0;overflow-y:auto;overflow-x:hidden;outline:none}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item{height:30px}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item .mat-icon{font-size:24px}.o-filter-by-column-dialog .content-wrapper .column-filter-empty-list{text-align:center}\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.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.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: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i7$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableFilterByColumnDataDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-table-filter-by-column-data-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.o-filter-by-column-dialog]': 'true'
-                    }, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_BY_COLUMN' | oTranslate }}: {{ column.title | oTranslate }}</span>\n<div mat-dialog-content class=\"dialog-list-container\">\n  <div fxLayout=\"column\" class=\"content-wrapper\" [class.content-wrapper-fixed-dimension]=\"getFixedDimensionClass()\">\n    <mat-slide-toggle #customFilterSlide (change)=\"onSlideChange($event)\" [checked]=\"(isCustomFilter | async)\" *ngIf=\"isDefaultFilter | async\">\n      {{ 'TABLE.FILTER_BY_COLUMN.CUSTOM_FILTER' | oTranslate }}\n    </mat-slide-toggle>\n    <div fxFill *ngIf=\"!(isCustomFilter | async);else customFilterTemplate\" fxLayout=\"column\">\n      <mat-form-field class=\"hinted\">\n        <mat-icon matPrefix svgIcon=\"ontimize:search\"></mat-icon>\n        <input matInput #filter placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n        <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      </mat-form-field>\n      <div *ngIf=\"(listData | async).length > 0; else emptyListData\" fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start start\">\n          <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" [disabled]=\"!listData\"\n            class=\"select-all-checkbox\">\n            {{ 'TABLE.FILTER_BY_COLUMN.CHECK_ALL' | oTranslate }}\n          </mat-checkbox>\n          <span *ngIf=\"!listData\" class=\"column-filter-empty-list\">\n            {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY_FILTER' | oTranslate }}\n          </span>\n        </div>\n        <button type=\"button\" mat-icon-button (click)=\"onClickSortValues()\">\n          <mat-icon [svgIcon]=\"getSortByAlphaIcon()\"></mat-icon>\n        </button>\n      </div>\n\n      <ng-template #emptyListData>\n        <span class=\"column-filter-empty-list\">\n          {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY' | oTranslate }}\n        </span>\n      </ng-template>\n\n      <mat-selection-list *ngIf=\"preloadValues || listData\" #filterValueList class=\"select-values-list\" (selectionChange)=\"onSelect($event)\">\n        <mat-list-option *ngFor=\"let record of (listData | async); let i = index\" checkboxPosition=\"before\" [selected]=\"record.selected\"\n          [value]=\"record\">\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ record.value || ('TABLE.FILTER_BY_COLUMN.EMPTY_VALUE' | oTranslate) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{ cellvalue: record.value, rowvalue: record.rowValue }\">\n          </ng-template>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </div>\n</div>\n\n\n<mat-dialog-actions fxLayoutAlign=\"space-between center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"clearAction\" class=\"o-button-info\">\n    {{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate }} </button>\n  <span align=\"end\">\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"cancelAction\" class=\"o-button-default cancel\">\n      {{ 'CANCEL' | oTranslate }} </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"acceptAction\" class=\"o-button-primary\">\n      {{ 'ACCEPT' | oTranslate }} </button>\n  </span>\n</mat-dialog-actions>\n\n<!-- TEMPLATE CUSTOM FILTER-->\n<ng-template #customFilterTemplate>\n  <div *ngIf=\"isTextType()\">\n    <mat-form-field fxFlex class=\"hinted\">\n      <input matInput #filterText [formControl]=\"fcText\" placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n      <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n        <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n      </button>\n    </mat-form-field>\n  </div>\n  <div *ngIf=\"isNumericType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [formControl]=\"fcFrom\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [formControl]=\"fcTo\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n    </mat-form-field>\n    <button type=\"button\" mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n  <div *ngIf=\"isDateType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerFrom\" [max]=\"fcTo.value\" [formControl]=\"fcFrom\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerFrom\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerFrom [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerTo\" [min]=\"fcFrom.value\" [formControl]=\"fcTo\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerTo\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerTo [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n\n</ng-template>\n", styles: [".o-filter-by-column-dialog .mat-mdc-slide-toggle{padding-bottom:24px;padding-left:14px}.o-filter-by-column-dialog .content-wrapper{padding:24px 0 12px;margin:0}.o-filter-by-column-dialog .content-wrapper.content-wrapper-fixed-dimension{max-height:430px;min-height:430px;min-width:250px;width:100%}.o-filter-by-column-dialog .content-wrapper .mat-mdc-form-field.hinted{margin-bottom:24px}.o-filter-by-column-dialog .content-wrapper .select-all-checkbox{padding-bottom:6px}.o-filter-by-column-dialog .content-wrapper .select-values-list{padding-top:0;overflow-y:auto;overflow-x:hidden;outline:none}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item{height:30px}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item .mat-icon{font-size:24px}.o-filter-by-column-dialog .content-wrapper .column-filter-empty-list{text-align:center}\n"] }]
+                    }, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.FILTER_BY_COLUMN' | oTranslate }}: {{ column.title | oTranslate }}</span>\n<div mat-dialog-content class=\"dialog-list-container\">\n  <div fxLayout=\"column\" class=\"content-wrapper\" [class.content-wrapper-fixed-dimension]=\"getFixedDimensionClass()\">\n    <mat-slide-toggle #customFilterSlide (change)=\"onSlideChange($event)\" [checked]=\"(isCustomFilter | async)\" *ngIf=\"isDefaultFilter | async\">\n      {{ 'TABLE.FILTER_BY_COLUMN.CUSTOM_FILTER' | oTranslate }}\n    </mat-slide-toggle>\n    <div fxFill *ngIf=\"!(isCustomFilter | async);else customFilterTemplate\" fxLayout=\"column\">\n      <mat-form-field class=\"hinted\">\n        <mat-icon matPrefix svgIcon=\"ontimize:search\"></mat-icon>\n        <input matInput #filter placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n        <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      </mat-form-field>\n      <div *ngIf=\"(listData | async).length > 0; else emptyListData\" fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start start\">\n          <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" [disabled]=\"!listData\"\n            class=\"select-all-checkbox\">\n            {{ 'TABLE.FILTER_BY_COLUMN.CHECK_ALL' | oTranslate }}\n          </mat-checkbox>\n          <span *ngIf=\"!listData\" class=\"column-filter-empty-list\">\n            {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY_FILTER' | oTranslate }}\n          </span>\n        </div>\n        <button type=\"button\" mat-icon-button (click)=\"onClickSortValues()\">\n          <mat-icon [svgIcon]=\"getSortByAlphaIcon()\"></mat-icon>\n        </button>\n      </div>\n\n      <ng-template #emptyListData>\n        <span class=\"column-filter-empty-list\">\n          {{ 'TABLE.FILTER_BY_COLUMN.LIST_EMPTY' | oTranslate }}\n        </span>\n      </ng-template>\n\n      <mat-selection-list *ngIf=\"preloadValues || listData\" #filterValueList class=\"select-values-list\" (selectionChange)=\"onSelect($event)\">\n        <mat-list-option *ngFor=\"let record of (listData | async); let i = index\" checkboxPosition=\"before\" [selected]=\"record.selected\"\n          [value]=\"record\">\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ record.value || ('TABLE.FILTER_BY_COLUMN.EMPTY_VALUE' | oTranslate) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{ cellvalue: record.value, rowvalue: record.rowValue }\">\n          </ng-template>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </div>\n</div>\n\n\n<mat-dialog-actions fxLayoutAlign=\"space-between center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"clearAction\" class=\"o-button-info\">\n    {{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate }} </button>\n  <span align=\"end\">\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"cancelAction\" class=\"o-button-default cancel\">\n      {{ 'CANCEL' | oTranslate }} </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"acceptAction\" class=\"o-button-primary\">\n      {{ 'ACCEPT' | oTranslate }} </button>\n  </span>\n</mat-dialog-actions>\n\n<!-- TEMPLATE CUSTOM FILTER-->\n<ng-template #customFilterTemplate>\n  <div *ngIf=\"isTextType()\">\n    <mat-form-field fxFlex class=\"hinted\">\n      <input matInput #filterText [formControl]=\"fcText\" placeholder=\"{{ 'TABLE.FILTER' | oTranslate }}\">\n      <mat-hint>{{ 'TABLE.FILTER_BY_COLUMN.HINT_STAR' | oTranslate }}</mat-hint>\n      <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n        <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n      </button>\n    </mat-form-field>\n  </div>\n  <div *ngIf=\"isNumericType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [formControl]=\"fcFrom\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [formControl]=\"fcTo\" placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n    </mat-form-field>\n    <button type=\"button\" mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n  <div *ngIf=\"isDateType()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"12px\">\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerFrom\" [max]=\"fcTo.value\" [formControl]=\"fcFrom\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.FROM' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerFrom\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerFrom [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput [matDatepicker]=\"datepickerTo\" [min]=\"fcFrom.value\" [formControl]=\"fcTo\"\n        placeholder=\"{{ 'TABLE.FILTER_BY_COLUMN.TO' | oTranslate }}\">\n      <mat-datepicker-toggle matSuffix [for]=\"datepickerTo\">\n        <mat-icon matDatepickerToggleIcon>today</mat-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #datepickerTo [startView]=\"getStartedViewDatepicker()\"></mat-datepicker>\n    </mat-form-field>\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"clearValues()\">\n      <mat-icon svgIcon=\"ontimize:close\"></mat-icon>\n    </button>\n  </div>\n\n</ng-template>\n", styles: [".o-filter-by-column-dialog .mat-mdc-slide-toggle{padding-bottom:24px;padding-left:14px}.o-filter-by-column-dialog .content-wrapper{padding:24px 0 12px;margin:0}.o-filter-by-column-dialog .content-wrapper.content-wrapper-fixed-dimension{max-height:430px;min-height:430px;min-width:250px;width:100%}.o-filter-by-column-dialog .content-wrapper .mat-mdc-form-field.hinted{margin-bottom:24px}.o-filter-by-column-dialog .content-wrapper .select-values-list{padding-top:0;overflow-y:auto;overflow-x:hidden;outline:none}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item{height:30px}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-filter-by-column-dialog .content-wrapper .select-values-list .mat-mdc-list-item .mat-mdc-list-item .mat-icon{font-size:24px}.o-filter-by-column-dialog .content-wrapper .column-filter-empty-list{text-align:center}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -29043,10 +29082,10 @@ class OTableApplyConfigurationDialogComponent {
     }
 }
 OTableApplyConfigurationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableApplyConfigurationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-OTableApplyConfigurationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableApplyConfigurationDialogComponent, selector: "o-table-apply-configuration-dialog", viewQueries: [{ propertyName: "configurationList", first: true, predicate: MatSelectionList, descendants: true, static: true }], ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION' | oTranslate }}</div>\n  <mat-selection-list #configurationList dense class=\"o-table-apply-configuration-dialog-list\">\n    <mat-list-option checkboxPosition=\"before\" [value]=\"default_configuration\">\n      <span matListItemTitle class=\"o-table-apply-configuration-dialog-list-title\">\n        {{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT' | oTranslate }}\n      </span>\n      <span matListItemLine>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT_DESCRIPTION' | oTranslate }}</span>\n    </mat-list-option>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let configuration of configurations; let i = index\" [value]=\"configuration.name\">\n      <span matListItemTitle>{{ configuration.name }}</span>\n      <span matListItemLine>{{ configuration.description }}</span>\n    </mat-list-option>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"configurationList.selectedOptions.selected.length!==1 || isDefaultConfigurationSelected()\"\n    (click)=\"removeConfiguration(configurationList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">\n    {{ 'DELETE' | oTranslate }}\n  </button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"configurationList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">{{ 'OK' | oTranslate }}</button>\n</mat-dialog-actions>\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.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: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }] });
+OTableApplyConfigurationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableApplyConfigurationDialogComponent, selector: "o-table-apply-configuration-dialog", viewQueries: [{ propertyName: "configurationList", first: true, predicate: MatSelectionList, descendants: true, static: true }], ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION' | oTranslate }}</div>\n  <mat-selection-list #configurationList class=\"o-table-apply-configuration-dialog-list\">\n    <mat-list-option checkboxPosition=\"before\" [value]=\"default_configuration\">\n      <span matListItemTitle class=\"o-table-apply-configuration-dialog-list-title\">\n        {{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT' | oTranslate }}\n      </span>\n      <span matListItemLine>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT_DESCRIPTION' | oTranslate }}</span>\n    </mat-list-option>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let configuration of configurations; let i = index\" [value]=\"configuration.name\">\n      <span matListItemTitle>{{ configuration.name }}</span>\n      <span matListItemLine>{{ configuration.description }}</span>\n    </mat-list-option>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"configurationList.selectedOptions.selected.length!==1 || isDefaultConfigurationSelected()\"\n    (click)=\"removeConfiguration(configurationList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">\n    {{ 'DELETE' | oTranslate }}\n  </button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"configurationList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">{{ 'OK' | oTranslate }}</button>\n</mat-dialog-actions>\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.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: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableApplyConfigurationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'o-table-apply-configuration-dialog', template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION' | oTranslate }}</div>\n  <mat-selection-list #configurationList dense class=\"o-table-apply-configuration-dialog-list\">\n    <mat-list-option checkboxPosition=\"before\" [value]=\"default_configuration\">\n      <span matListItemTitle class=\"o-table-apply-configuration-dialog-list-title\">\n        {{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT' | oTranslate }}\n      </span>\n      <span matListItemLine>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT_DESCRIPTION' | oTranslate }}</span>\n    </mat-list-option>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let configuration of configurations; let i = index\" [value]=\"configuration.name\">\n      <span matListItemTitle>{{ configuration.name }}</span>\n      <span matListItemLine>{{ configuration.description }}</span>\n    </mat-list-option>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"configurationList.selectedOptions.selected.length!==1 || isDefaultConfigurationSelected()\"\n    (click)=\"removeConfiguration(configurationList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">\n    {{ 'DELETE' | oTranslate }}\n  </button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"configurationList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">{{ 'OK' | oTranslate }}</button>\n</mat-dialog-actions>\n" }]
+            args: [{ selector: 'o-table-apply-configuration-dialog', template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content fxLayout=\"column\">\n  <div mat-subheader>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION' | oTranslate }}</div>\n  <mat-selection-list #configurationList class=\"o-table-apply-configuration-dialog-list\">\n    <mat-list-option checkboxPosition=\"before\" [value]=\"default_configuration\">\n      <span matListItemTitle class=\"o-table-apply-configuration-dialog-list-title\">\n        {{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT' | oTranslate }}\n      </span>\n      <span matListItemLine>{{ 'TABLE.DIALOG.APPLY_CONFIGURATION_DEFAULT_DESCRIPTION' | oTranslate }}</span>\n    </mat-list-option>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let configuration of configurations; let i = index\" [value]=\"configuration.name\">\n      <span matListItemTitle>{{ configuration.name }}</span>\n      <span matListItemLine>{{ configuration.description }}</span>\n    </mat-list-option>\n  </mat-selection-list>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button [disabled]=\"configurationList.selectedOptions.selected.length!==1 || isDefaultConfigurationSelected()\"\n    (click)=\"removeConfiguration(configurationList.selectedOptions.selected[0].value)\" class=\"o-button-danger\">\n    {{ 'DELETE' | oTranslate }}\n  </button>\n  <span fxFlex></span>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"true\" [disabled]=\"configurationList.selectedOptions.selected.length!==1\"\n    class=\"o-button-primary\">{{ 'OK' | oTranslate }}</button>\n</mat-dialog-actions>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -29244,10 +29283,10 @@ class OTableStoreConfigurationDialogComponent extends OTableBaseDialogClass {
     }
 }
 OTableStoreConfigurationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableStoreConfigurationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-OTableStoreConfigurationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableStoreConfigurationDialogComponent, selector: "o-table-store-configuration-dialog", viewQueries: [{ propertyName: "propertiesList", first: true, predicate: ["propertiesList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content>\n  <div mat-subheader>{{ 'TABLE.DIALOG.SAVE_CONFIGURATION' | oTranslate }}</div>\n  <form #form [formGroup]=\"formGroup\" fxLayout=\"column\">\n    <mat-form-field>\n      <input matInput [matTooltip]=\"tooltipText\" [matTooltipClass]=\"tooltipClass\" placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_NAME' | oTranslate }}\"\n        formControlName=\"name\" required />\n      <mat-error *oMatError=\"hasError(formGroup.controls['name'], 'required')\">\n        {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"example-full-width\">\n      <textarea matInput placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_DESCRIPTION' | oTranslate }}\" formControlName=\"description\" rows=\"4\"\n        cols=\"50\"></textarea>\n    </mat-form-field>\n    <div class=\"inner-subheader\" mat-subheader>{{ 'TABLE.DIALOG.CONFIGURATION_PROPERTIES' | oTranslate }}</div>\n    <div fxLayout=\"column\">\n      <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" class=\"select-all-checkbox\">\n        {{ 'SELECT_ALL' | oTranslate }}\n      </mat-checkbox>\n\n      <mat-selection-list #propertiesList dense class=\"o-table-save-configuration-dialog-list o-scroll\">\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let property of properties\" [value]=\"property.property\">\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n            <span matListItemTitle fxFlex>{{ property.name | oTranslate }}</span>\n            <mat-icon *ngIf=\"property.info\" matTooltip=\"{{ property.info | oTranslate }}\" class=\"o-tscd-list-tooltip\">info</mat-icon>\n          </div>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </form>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">\n    {{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"true\"\n    [disabled]=\"!formGroup.valid || propertiesList.selectedOptions.selected.length===0\" class=\"o-button-primary\">{{ 'SAVE' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".select-all-checkbox{padding:6px 0}.o-table-save-configuration-dialog-list{max-height:120px;overflow-y:scroll}.o-table-save-configuration-dialog-list .mat-mdc-list-item{height:30px}.o-table-save-configuration-dialog-list .mat-mdc-list-item .o-tscd-list-tooltip.mat-icon{opacity:.25}\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: "directive", type: i3$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { 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: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OTableStoreConfigurationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableStoreConfigurationDialogComponent, selector: "o-table-store-configuration-dialog", viewQueries: [{ propertyName: "propertiesList", first: true, predicate: ["propertiesList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content>\n  <div mat-subheader>{{ 'TABLE.DIALOG.SAVE_CONFIGURATION' | oTranslate }}</div>\n  <form #form [formGroup]=\"formGroup\" fxLayout=\"column\">\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput [matTooltip]=\"tooltipText\" [matTooltipClass]=\"tooltipClass\" placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_NAME' | oTranslate }}\"\n        formControlName=\"name\" required />\n      <mat-error *oMatError=\"hasError(formGroup.controls['name'], 'required')\">\n        {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"example-full-width\" subscriptSizing=\"dynamic\">\n      <textarea matInput placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_DESCRIPTION' | oTranslate }}\" formControlName=\"description\" rows=\"4\"\n        cols=\"50\"></textarea>\n    </mat-form-field>\n    <div class=\"inner-subheader\" mat-subheader>{{ 'TABLE.DIALOG.CONFIGURATION_PROPERTIES' | oTranslate }}</div>\n    <div fxLayout=\"column\">\n      <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" class=\"select-all-checkbox\">\n        {{ 'SELECT_ALL' | oTranslate }}\n      </mat-checkbox>\n\n      <mat-selection-list #propertiesList class=\"o-table-save-configuration-dialog-list o-scroll\">\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let property of properties\" [value]=\"property.property\">\n          <span matListItemTitle fxFlex>{{ property.name | oTranslate }}</span>\n          <mat-icon matListItemIcon *ngIf=\"property.info\" matTooltip=\"{{ property.info | oTranslate }}\" class=\"o-tscd-list-tooltip\">info</mat-icon>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </form>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">\n    {{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"true\"\n    [disabled]=\"!formGroup.valid || propertiesList.selectedOptions.selected.length===0\" class=\"o-button-primary\">{{ 'SAVE' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".o-table-save-configuration-dialog-list{max-height:120px;overflow-y:scroll}.o-table-save-configuration-dialog-list .mat-mdc-list-item .o-tscd-list-tooltip.mat-icon{opacity:.25}\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.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: i3$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { 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: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i5$1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableStoreConfigurationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'o-table-store-configuration-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content>\n  <div mat-subheader>{{ 'TABLE.DIALOG.SAVE_CONFIGURATION' | oTranslate }}</div>\n  <form #form [formGroup]=\"formGroup\" fxLayout=\"column\">\n    <mat-form-field>\n      <input matInput [matTooltip]=\"tooltipText\" [matTooltipClass]=\"tooltipClass\" placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_NAME' | oTranslate }}\"\n        formControlName=\"name\" required />\n      <mat-error *oMatError=\"hasError(formGroup.controls['name'], 'required')\">\n        {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"example-full-width\">\n      <textarea matInput placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_DESCRIPTION' | oTranslate }}\" formControlName=\"description\" rows=\"4\"\n        cols=\"50\"></textarea>\n    </mat-form-field>\n    <div class=\"inner-subheader\" mat-subheader>{{ 'TABLE.DIALOG.CONFIGURATION_PROPERTIES' | oTranslate }}</div>\n    <div fxLayout=\"column\">\n      <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" class=\"select-all-checkbox\">\n        {{ 'SELECT_ALL' | oTranslate }}\n      </mat-checkbox>\n\n      <mat-selection-list #propertiesList dense class=\"o-table-save-configuration-dialog-list o-scroll\">\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let property of properties\" [value]=\"property.property\">\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n            <span matListItemTitle fxFlex>{{ property.name | oTranslate }}</span>\n            <mat-icon *ngIf=\"property.info\" matTooltip=\"{{ property.info | oTranslate }}\" class=\"o-tscd-list-tooltip\">info</mat-icon>\n          </div>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </form>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">\n    {{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"true\"\n    [disabled]=\"!formGroup.valid || propertiesList.selectedOptions.selected.length===0\" class=\"o-button-primary\">{{ 'SAVE' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".select-all-checkbox{padding:6px 0}.o-table-save-configuration-dialog-list{max-height:120px;overflow-y:scroll}.o-table-save-configuration-dialog-list .mat-mdc-list-item{height:30px}.o-table-save-configuration-dialog-list .mat-mdc-list-item .o-tscd-list-tooltip.mat-icon{opacity:.25}\n"] }]
+            args: [{ selector: 'o-table-store-configuration-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' | oTranslate }}</span>\n\n<mat-dialog-content>\n  <div mat-subheader>{{ 'TABLE.DIALOG.SAVE_CONFIGURATION' | oTranslate }}</div>\n  <form #form [formGroup]=\"formGroup\" fxLayout=\"column\">\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput [matTooltip]=\"tooltipText\" [matTooltipClass]=\"tooltipClass\" placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_NAME' | oTranslate }}\"\n        formControlName=\"name\" required />\n      <mat-error *oMatError=\"hasError(formGroup.controls['name'], 'required')\">\n        {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"example-full-width\" subscriptSizing=\"dynamic\">\n      <textarea matInput placeholder=\"{{ 'TABLE.DIALOG.CONFIGURATION_DESCRIPTION' | oTranslate }}\" formControlName=\"description\" rows=\"4\"\n        cols=\"50\"></textarea>\n    </mat-form-field>\n    <div class=\"inner-subheader\" mat-subheader>{{ 'TABLE.DIALOG.CONFIGURATION_PROPERTIES' | oTranslate }}</div>\n    <div fxLayout=\"column\">\n      <mat-checkbox (change)=\"onSelectAllChange($event)\" [checked]=\"areAllSelected()\" [indeterminate]=\"isIndeterminate()\" class=\"select-all-checkbox\">\n        {{ 'SELECT_ALL' | oTranslate }}\n      </mat-checkbox>\n\n      <mat-selection-list #propertiesList class=\"o-table-save-configuration-dialog-list o-scroll\">\n        <mat-list-option checkboxPosition=\"before\" *ngFor=\"let property of properties\" [value]=\"property.property\">\n          <span matListItemTitle fxFlex>{{ property.name | oTranslate }}</span>\n          <mat-icon matListItemIcon *ngIf=\"property.info\" matTooltip=\"{{ property.info | oTranslate }}\" class=\"o-tscd-list-tooltip\">info</mat-icon>\n        </mat-list-option>\n      </mat-selection-list>\n    </div>\n  </form>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"false\" class=\"o-button-default cancel\">\n    {{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button class=\"mat-primary\" [mat-dialog-close]=\"true\"\n    [disabled]=\"!formGroup.valid || propertiesList.selectedOptions.selected.length===0\" class=\"o-button-primary\">{{ 'SAVE' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".o-table-save-configuration-dialog-list{max-height:120px;overflow-y:scroll}.o-table-save-configuration-dialog-list .mat-mdc-list-item .o-tscd-list-tooltip.mat-icon{opacity:.25}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: i0.Injector }]; }, propDecorators: { propertiesList: [{
                 type: ViewChild,
                 args: ['propertiesList']
@@ -29353,12 +29392,12 @@ class OTableVisibleColumnsDialogComponent {
     }
 }
 OTableVisibleColumnsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableVisibleColumnsDialogComponent, deps: [{ token: i0.Injector }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-OTableVisibleColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableVisibleColumnsDialogComponent, selector: "o-table-visible-columns-dialog", host: { properties: { "class.o-table-visible-columns-dialog": "true" } }, ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.COLVIS' | oTranslate }}</span>\n\n\n<mat-dialog-content>\n  <div mat-subheader>{{'TABLE.VISIBLE_COLUMNS.DESCRIPTION' | oTranslate}}</div>\n\n  <div [ngClass]=\"rowHeight\">\n    <mat-list cdkDropList (cdkDropListDropped)=\"drop($event)\" dense>\n      <mat-list-item *ngFor=\"let column of columns\" cdkDrag (click)=\"onClickColumn(column)\" [ngClass]=\"{'column-hidden':!column.visible}\"\n        class=\"o-drag-list-item-box\">\n        <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"stretch center\">\n          <mat-icon matListItemIcon svgIcon=\"ontimize:drag_handle\"></mat-icon>\n          <span matListItemLine fxFlex>{{ (column.title || column.attr) | oTranslate }}</span>\n          <mat-icon *ngIf=\"column.visible\" svgIcon=\"ontimize:visibility\" color=\"primary\"></mat-icon>\n          <mat-icon *ngIf=\"!column.visible\" svgIcon=\"ontimize:visibility_off\"></mat-icon>\n        </div>\n        <mat-divider></mat-divider>\n      </mat-list-item>\n    </mat-list>\n  </div>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"null\" class=\"o-button-default cancel\" cancel>{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"closeDialog()\" class=\"o-button-primary\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content{overflow:auto;padding-top:0;margin-top:24px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-subheader{display:block}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .title_list{font-weight:600;margin-bottom:6px;margin-top:12px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .cdk-drop-list{padding:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item{padding-left:0;flex-direction:column;cursor:pointer;height:auto}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item.column-hidden{opacity:.4}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content{padding:0;cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__start{margin-top:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-icon{display:flex}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:drag_handle\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list-item{cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility_off\"]{width:32px}\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: 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$1.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: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i7$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableVisibleColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableVisibleColumnsDialogComponent, selector: "o-table-visible-columns-dialog", host: { properties: { "class.o-table-visible-columns-dialog": "true" } }, ngImport: i0, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.COLVIS' | oTranslate }}</span>\n\n\n<mat-dialog-content>\n  <div mat-subheader>{{'TABLE.VISIBLE_COLUMNS.DESCRIPTION' | oTranslate}}</div>\n\n  <div [ngClass]=\"rowHeight\">\n    <mat-list cdkDropList (cdkDropListDropped)=\"drop($event)\">\n      <mat-list-item *ngFor=\"let column of columns\" cdkDrag (click)=\"onClickColumn(column)\" [ngClass]=\"{'column-hidden':!column.visible}\"\n        class=\"o-drag-list-item-box\">\n        <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"stretch center\">\n          <mat-icon matListItemIcon svgIcon=\"ontimize:drag_handle\"></mat-icon>\n          <span matListItemLine fxFlex>{{ (column.title || column.attr) | oTranslate }}</span>\n          <mat-icon *ngIf=\"column.visible\" svgIcon=\"ontimize:visibility\" color=\"primary\"></mat-icon>\n          <mat-icon *ngIf=\"!column.visible\" svgIcon=\"ontimize:visibility_off\"></mat-icon>\n        </div>\n        <mat-divider></mat-divider>\n      </mat-list-item>\n    </mat-list>\n  </div>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"null\" class=\"o-button-default cancel\" cancel>{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"closeDialog()\" class=\"o-button-primary\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content{overflow:auto;padding-top:0;margin-top:24px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-subheader{display:block}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .title_list{font-weight:600;margin-bottom:6px;margin-top:12px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .cdk-drop-list{padding:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item{padding-left:0;flex-direction:column;cursor:pointer;height:auto}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item.column-hidden{opacity:.4}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content{padding:0;cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__secondary-text,.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__primary-text{padding:0 8px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__start{margin-top:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-icon{display:flex}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:drag_handle\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list-item{cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility_off\"]{width:32px}\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: 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$1.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: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i7$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableVisibleColumnsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-table-visible-columns-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.o-table-visible-columns-dialog]': 'true'
-                    }, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.COLVIS' | oTranslate }}</span>\n\n\n<mat-dialog-content>\n  <div mat-subheader>{{'TABLE.VISIBLE_COLUMNS.DESCRIPTION' | oTranslate}}</div>\n\n  <div [ngClass]=\"rowHeight\">\n    <mat-list cdkDropList (cdkDropListDropped)=\"drop($event)\" dense>\n      <mat-list-item *ngFor=\"let column of columns\" cdkDrag (click)=\"onClickColumn(column)\" [ngClass]=\"{'column-hidden':!column.visible}\"\n        class=\"o-drag-list-item-box\">\n        <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"stretch center\">\n          <mat-icon matListItemIcon svgIcon=\"ontimize:drag_handle\"></mat-icon>\n          <span matListItemLine fxFlex>{{ (column.title || column.attr) | oTranslate }}</span>\n          <mat-icon *ngIf=\"column.visible\" svgIcon=\"ontimize:visibility\" color=\"primary\"></mat-icon>\n          <mat-icon *ngIf=\"!column.visible\" svgIcon=\"ontimize:visibility_off\"></mat-icon>\n        </div>\n        <mat-divider></mat-divider>\n      </mat-list-item>\n    </mat-list>\n  </div>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"null\" class=\"o-button-default cancel\" cancel>{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"closeDialog()\" class=\"o-button-primary\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content{overflow:auto;padding-top:0;margin-top:24px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-subheader{display:block}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .title_list{font-weight:600;margin-bottom:6px;margin-top:12px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .cdk-drop-list{padding:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item{padding-left:0;flex-direction:column;cursor:pointer;height:auto}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item.column-hidden{opacity:.4}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content{padding:0;cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__start{margin-top:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-icon{display:flex}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:drag_handle\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list-item{cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility_off\"]{width:32px}\n"] }]
+                    }, template: "<span mat-dialog-title>{{ 'TABLE.BUTTONS.COLVIS' | oTranslate }}</span>\n\n\n<mat-dialog-content>\n  <div mat-subheader>{{'TABLE.VISIBLE_COLUMNS.DESCRIPTION' | oTranslate}}</div>\n\n  <div [ngClass]=\"rowHeight\">\n    <mat-list cdkDropList (cdkDropListDropped)=\"drop($event)\">\n      <mat-list-item *ngFor=\"let column of columns\" cdkDrag (click)=\"onClickColumn(column)\" [ngClass]=\"{'column-hidden':!column.visible}\"\n        class=\"o-drag-list-item-box\">\n        <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"stretch center\">\n          <mat-icon matListItemIcon svgIcon=\"ontimize:drag_handle\"></mat-icon>\n          <span matListItemLine fxFlex>{{ (column.title || column.attr) | oTranslate }}</span>\n          <mat-icon *ngIf=\"column.visible\" svgIcon=\"ontimize:visibility\" color=\"primary\"></mat-icon>\n          <mat-icon *ngIf=\"!column.visible\" svgIcon=\"ontimize:visibility_off\"></mat-icon>\n        </div>\n        <mat-divider></mat-divider>\n      </mat-list-item>\n    </mat-list>\n  </div>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"null\" class=\"o-button-default cancel\" cancel>{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"closeDialog()\" class=\"o-button-primary\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n", styles: [".o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content{overflow:auto;padding-top:0;margin-top:24px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-subheader{display:block}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .title_list{font-weight:600;margin-bottom:6px;margin-top:12px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .cdk-drop-list{padding:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item{padding-left:0;flex-direction:column;cursor:pointer;height:auto}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item.column-hidden{opacity:.4}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content{padding:0;cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__secondary-text,.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__primary-text{padding:0 8px}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mdc-list-item__start{margin-top:0}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-icon{display:flex}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:drag_handle\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-mdc-list-item{cursor:move}.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility\"],.o-table-visible-columns-dialog .mat-mdc-dialog-content.mat-mdc-dialog-content .mat-icon[svgicon=\"ontimize:visibility_off\"]{width:32px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -29778,7 +29817,7 @@ class OTableMenuComponent {
     }
 }
 OTableMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableMenuComponent, deps: [{ token: i0.Injector }, { token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: forwardRef(() => OTableBase) }, { token: O_CHART_ON_DEMAND_SERVICE, optional: true }, { token: O_REPORT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OTableMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableMenuComponent, selector: "o-table-menu", inputs: { selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], exportButton: ["export-button", "exportButton"], columnsVisibilityButton: ["columns-visibility-button", "columnsVisibilityButton"], showConfigurationOption: ["show-configuration-option", "showConfigurationOption"], showFilterOption: ["show-filter-option", "showFilterOption"], showGroupByOption: ["show-group-by-option", "showGroupByOption"], showResetWidthOption: ["show-reset-width-option", "showResetWidthOption"], showReportOnDemandOption: ["show-report-on-demand-option", "showReportOnDemandOption"], showChartsOnDemandOption: ["show-charts-on-demand-option", "showChartsOnDemandOption"] }, host: { properties: { "class.o-table-menu": "true" } }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "selectAllCheckboxOption", first: true, predicate: ["selectAllCheckboxOption"], descendants: true }, { propertyName: "exportButtonOption", first: true, predicate: ["exportButtonOption"], descendants: true }, { propertyName: "columnsVisibilityButtonOption", first: true, predicate: ["columnsVisibilityButtonOption"], descendants: true }, { propertyName: "filterMenuButton", first: true, predicate: ["filterMenuButton"], descendants: true, read: ElementRef }, { propertyName: "configurationMenuButton", first: true, predicate: ["configurationMenuButton"], descendants: true, read: ElementRef }, { propertyName: "filterMenu", first: true, predicate: ["filterMenu"], descendants: true }, { propertyName: "configurationMenu", first: true, predicate: ["configurationMenu"], descendants: true }, { propertyName: "columnFilterOption", first: true, predicate: ["columnFilterOption"], descendants: true }, { propertyName: "chartMenu", first: true, predicate: ["chartMenu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" x-position=\"before\" [class]=\"(rowHeightObservable | async) +' o-table-menu'\">\n  <!-- DEFAULT OPTIONS -->\n  <o-table-option #selectAllCheckboxOption *ngIf=\"showSelectAllCheckbox\" [active]=\"isSelectAllOptionActive\" (onClick)=\"onShowsSelects()\"\n    label=\"TABLE.BUTTONS.SELECT\" show-checkbox-option=\"true\"></o-table-option>\n  <o-table-option #columnsVisibilityButtonOption *ngIf=\"showColumnsVisibilityButton\" (onClick)=\"onChangeColumnsVisibilityClicked()\"\n    label=\"TABLE.BUTTONS.COLVIS\"></o-table-option>\n  <o-table-option *ngIf=\"showResetWidthOption\" (onClick)=\"onResetWidthClicked()\" label=\"TABLE.BUTTONS.RESETWIDTH\"></o-table-option>\n\n  <mat-divider *ngIf=\"showSelectAllCheckbox || showColumnsVisibilityButton || showResetWidthOption\"></mat-divider>\n\n  <o-table-option #exportButtonOption *ngIf=\"showExportButton\" (onClick)=\"onExportButtonClicked()\" label=\"TABLE.BUTTONS.EXPORT\"></o-table-option>\n  <o-table-option (onClick)=\"onReportOnDemandClicked()\" label=\"TABLE.BUTTONS.REPORT_ON_DEMAND\" *ngIf=\"showReportOnDemandButton\"></o-table-option>\n  <o-table-option *ngIf=\"showChartsOnDemandButton\" (onClick)=\"onChartsOnDemandClicked()\" label=\"TABLE.BUTTONS.CHART_ON_DEMAND\"></o-table-option>\n  <mat-divider *ngIf=\" showExportButton || showReportOnDemandButton || showChartsOnDemandButton\"></mat-divider>\n\n  <o-table-option #columnsGroupByOption *ngIf=\"showGroupByButton\" (onClick)=\"onGroupByClicked()\" label=\"TABLE.BUTTONS.GROUPBY\"></o-table-option>\n\n  <button type=\"button\" #filterMenuButton *ngIf=\"showFilterMenu\" mat-menu-item [matMenuTriggerFor]=\"filterMenu\">{{\n    'TABLE.BUTTONS.FILTER' | oTranslate }}</button>\n  <button type=\"button\" #configurationMenuButton *ngIf=\"showConfigurationMenu\" mat-menu-item [matMenuTriggerFor]=\"configurationMenu\">{{\n    'TABLE.BUTTONS.CONFIGURATION' | oTranslate }}</button>\n  <ng-content></ng-content>\n</mat-menu>\n\n<mat-menu #filterMenu=\"matMenu\" [class]=\"(rowHeightObservable| async) +' o-table-menu'\">\n  <o-table-option #columnFilterOption show-checkbox-option=\"true\" [active]=\"isColumnFilterOptionActive\" (onClick)=\"onFilterByColumnClicked()\"\n    label=\"TABLE.BUTTONS.FILTER_BY_COLUMN\">\n  </o-table-option>\n  <button type=\"button\" mat-menu-item (click)=\"onStoreFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_SAVE' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onLoadFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onClearFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate\n    }}</button>\n</mat-menu>\n\n<mat-menu #configurationMenu=\"matMenu\" [class]=\"(rowHeightObservable | async) +' o-table-menu'\">\n  <button type=\"button\" mat-menu-item (click)=\"onStoreConfigurationClicked()\">{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' |\n    oTranslate }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onApplyConfigurationClicked()\">{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' |\n    oTranslate }}</button>\n</mat-menu>\n", styles: [".o-table-menu .mat-divider{margin:0 8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: OTableOptionComponent, selector: "o-table-option", inputs: ["attr", "enabled", "icon", "show-checkbox-option", "label", "active"], outputs: ["onClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableMenuComponent, selector: "o-table-menu", inputs: { selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], exportButton: ["export-button", "exportButton"], columnsVisibilityButton: ["columns-visibility-button", "columnsVisibilityButton"], showConfigurationOption: ["show-configuration-option", "showConfigurationOption"], showFilterOption: ["show-filter-option", "showFilterOption"], showGroupByOption: ["show-group-by-option", "showGroupByOption"], showResetWidthOption: ["show-reset-width-option", "showResetWidthOption"], showReportOnDemandOption: ["show-report-on-demand-option", "showReportOnDemandOption"], showChartsOnDemandOption: ["show-charts-on-demand-option", "showChartsOnDemandOption"] }, host: { properties: { "class.o-table-menu": "true" } }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "selectAllCheckboxOption", first: true, predicate: ["selectAllCheckboxOption"], descendants: true }, { propertyName: "exportButtonOption", first: true, predicate: ["exportButtonOption"], descendants: true }, { propertyName: "columnsVisibilityButtonOption", first: true, predicate: ["columnsVisibilityButtonOption"], descendants: true }, { propertyName: "filterMenuButton", first: true, predicate: ["filterMenuButton"], descendants: true, read: ElementRef }, { propertyName: "configurationMenuButton", first: true, predicate: ["configurationMenuButton"], descendants: true, read: ElementRef }, { propertyName: "filterMenu", first: true, predicate: ["filterMenu"], descendants: true }, { propertyName: "configurationMenu", first: true, predicate: ["configurationMenu"], descendants: true }, { propertyName: "columnFilterOption", first: true, predicate: ["columnFilterOption"], descendants: true }, { propertyName: "chartMenu", first: true, predicate: ["chartMenu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" x-position=\"before\" [class]=\"(rowHeightObservable | async) +' o-table-menu o-mat-menu'\">\n  <!-- DEFAULT OPTIONS -->\n  <o-table-option #selectAllCheckboxOption *ngIf=\"showSelectAllCheckbox\" [active]=\"isSelectAllOptionActive\" (onClick)=\"onShowsSelects()\"\n    label=\"TABLE.BUTTONS.SELECT\" show-checkbox-option=\"true\"></o-table-option>\n  <o-table-option #columnsVisibilityButtonOption *ngIf=\"showColumnsVisibilityButton\" (onClick)=\"onChangeColumnsVisibilityClicked()\"\n    label=\"TABLE.BUTTONS.COLVIS\"></o-table-option>\n  <o-table-option *ngIf=\"showResetWidthOption\" (onClick)=\"onResetWidthClicked()\" label=\"TABLE.BUTTONS.RESETWIDTH\"></o-table-option>\n\n  <mat-divider *ngIf=\"showSelectAllCheckbox || showColumnsVisibilityButton || showResetWidthOption\"></mat-divider>\n\n  <o-table-option #exportButtonOption *ngIf=\"showExportButton\" (onClick)=\"onExportButtonClicked()\" label=\"TABLE.BUTTONS.EXPORT\"></o-table-option>\n  <o-table-option (onClick)=\"onReportOnDemandClicked()\" label=\"TABLE.BUTTONS.REPORT_ON_DEMAND\" *ngIf=\"showReportOnDemandButton\"></o-table-option>\n  <o-table-option *ngIf=\"showChartsOnDemandButton\" (onClick)=\"onChartsOnDemandClicked()\" label=\"TABLE.BUTTONS.CHART_ON_DEMAND\"></o-table-option>\n  <mat-divider *ngIf=\" showExportButton || showReportOnDemandButton || showChartsOnDemandButton\"></mat-divider>\n\n  <o-table-option #columnsGroupByOption *ngIf=\"showGroupByButton\" (onClick)=\"onGroupByClicked()\" label=\"TABLE.BUTTONS.GROUPBY\"></o-table-option>\n\n  <button type=\"button\" #filterMenuButton *ngIf=\"showFilterMenu\" mat-menu-item [matMenuTriggerFor]=\"filterMenu\">{{\n    'TABLE.BUTTONS.FILTER' | oTranslate }}</button>\n  <button type=\"button\" #configurationMenuButton *ngIf=\"showConfigurationMenu\" mat-menu-item [matMenuTriggerFor]=\"configurationMenu\">{{\n    'TABLE.BUTTONS.CONFIGURATION' | oTranslate }}</button>\n  <ng-content></ng-content>\n</mat-menu>\n\n<mat-menu #filterMenu=\"matMenu\" [class]=\"(rowHeightObservable| async) +' o-table-menu'\">\n  <o-table-option #columnFilterOption show-checkbox-option=\"true\" [active]=\"isColumnFilterOptionActive\" (onClick)=\"onFilterByColumnClicked()\"\n    label=\"TABLE.BUTTONS.FILTER_BY_COLUMN\">\n  </o-table-option>\n  <button type=\"button\" mat-menu-item (click)=\"onStoreFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_SAVE' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onLoadFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onClearFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate\n    }}</button>\n</mat-menu>\n\n<mat-menu #configurationMenu=\"matMenu\" [class]=\"(rowHeightObservable | async) +' o-table-menu'\">\n  <button type=\"button\" mat-menu-item (click)=\"onStoreConfigurationClicked()\">{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' |\n    oTranslate }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onApplyConfigurationClicked()\">{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' |\n    oTranslate }}</button>\n</mat-menu>\n", styles: [".o-table-menu .mat-divider{margin:0 8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: OTableOptionComponent, selector: "o-table-option", inputs: ["attr", "enabled", "icon", "show-checkbox-option", "label", "active"], outputs: ["onClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -29819,7 +29858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Component,
             args: [{ selector: 'o-table-menu', inputs: DEFAULT_INPUTS_O_TABLE_MENU, outputs: DEFAULT_OUTPUTS_O_TABLE_MENU, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-table-menu]': 'true'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menu=\"matMenu\" x-position=\"before\" [class]=\"(rowHeightObservable | async) +' o-table-menu'\">\n  <!-- DEFAULT OPTIONS -->\n  <o-table-option #selectAllCheckboxOption *ngIf=\"showSelectAllCheckbox\" [active]=\"isSelectAllOptionActive\" (onClick)=\"onShowsSelects()\"\n    label=\"TABLE.BUTTONS.SELECT\" show-checkbox-option=\"true\"></o-table-option>\n  <o-table-option #columnsVisibilityButtonOption *ngIf=\"showColumnsVisibilityButton\" (onClick)=\"onChangeColumnsVisibilityClicked()\"\n    label=\"TABLE.BUTTONS.COLVIS\"></o-table-option>\n  <o-table-option *ngIf=\"showResetWidthOption\" (onClick)=\"onResetWidthClicked()\" label=\"TABLE.BUTTONS.RESETWIDTH\"></o-table-option>\n\n  <mat-divider *ngIf=\"showSelectAllCheckbox || showColumnsVisibilityButton || showResetWidthOption\"></mat-divider>\n\n  <o-table-option #exportButtonOption *ngIf=\"showExportButton\" (onClick)=\"onExportButtonClicked()\" label=\"TABLE.BUTTONS.EXPORT\"></o-table-option>\n  <o-table-option (onClick)=\"onReportOnDemandClicked()\" label=\"TABLE.BUTTONS.REPORT_ON_DEMAND\" *ngIf=\"showReportOnDemandButton\"></o-table-option>\n  <o-table-option *ngIf=\"showChartsOnDemandButton\" (onClick)=\"onChartsOnDemandClicked()\" label=\"TABLE.BUTTONS.CHART_ON_DEMAND\"></o-table-option>\n  <mat-divider *ngIf=\" showExportButton || showReportOnDemandButton || showChartsOnDemandButton\"></mat-divider>\n\n  <o-table-option #columnsGroupByOption *ngIf=\"showGroupByButton\" (onClick)=\"onGroupByClicked()\" label=\"TABLE.BUTTONS.GROUPBY\"></o-table-option>\n\n  <button type=\"button\" #filterMenuButton *ngIf=\"showFilterMenu\" mat-menu-item [matMenuTriggerFor]=\"filterMenu\">{{\n    'TABLE.BUTTONS.FILTER' | oTranslate }}</button>\n  <button type=\"button\" #configurationMenuButton *ngIf=\"showConfigurationMenu\" mat-menu-item [matMenuTriggerFor]=\"configurationMenu\">{{\n    'TABLE.BUTTONS.CONFIGURATION' | oTranslate }}</button>\n  <ng-content></ng-content>\n</mat-menu>\n\n<mat-menu #filterMenu=\"matMenu\" [class]=\"(rowHeightObservable| async) +' o-table-menu'\">\n  <o-table-option #columnFilterOption show-checkbox-option=\"true\" [active]=\"isColumnFilterOptionActive\" (onClick)=\"onFilterByColumnClicked()\"\n    label=\"TABLE.BUTTONS.FILTER_BY_COLUMN\">\n  </o-table-option>\n  <button type=\"button\" mat-menu-item (click)=\"onStoreFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_SAVE' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onLoadFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onClearFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate\n    }}</button>\n</mat-menu>\n\n<mat-menu #configurationMenu=\"matMenu\" [class]=\"(rowHeightObservable | async) +' o-table-menu'\">\n  <button type=\"button\" mat-menu-item (click)=\"onStoreConfigurationClicked()\">{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' |\n    oTranslate }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onApplyConfigurationClicked()\">{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' |\n    oTranslate }}</button>\n</mat-menu>\n", styles: [".o-table-menu .mat-divider{margin:0 8px}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menu=\"matMenu\" x-position=\"before\" [class]=\"(rowHeightObservable | async) +' o-table-menu o-mat-menu'\">\n  <!-- DEFAULT OPTIONS -->\n  <o-table-option #selectAllCheckboxOption *ngIf=\"showSelectAllCheckbox\" [active]=\"isSelectAllOptionActive\" (onClick)=\"onShowsSelects()\"\n    label=\"TABLE.BUTTONS.SELECT\" show-checkbox-option=\"true\"></o-table-option>\n  <o-table-option #columnsVisibilityButtonOption *ngIf=\"showColumnsVisibilityButton\" (onClick)=\"onChangeColumnsVisibilityClicked()\"\n    label=\"TABLE.BUTTONS.COLVIS\"></o-table-option>\n  <o-table-option *ngIf=\"showResetWidthOption\" (onClick)=\"onResetWidthClicked()\" label=\"TABLE.BUTTONS.RESETWIDTH\"></o-table-option>\n\n  <mat-divider *ngIf=\"showSelectAllCheckbox || showColumnsVisibilityButton || showResetWidthOption\"></mat-divider>\n\n  <o-table-option #exportButtonOption *ngIf=\"showExportButton\" (onClick)=\"onExportButtonClicked()\" label=\"TABLE.BUTTONS.EXPORT\"></o-table-option>\n  <o-table-option (onClick)=\"onReportOnDemandClicked()\" label=\"TABLE.BUTTONS.REPORT_ON_DEMAND\" *ngIf=\"showReportOnDemandButton\"></o-table-option>\n  <o-table-option *ngIf=\"showChartsOnDemandButton\" (onClick)=\"onChartsOnDemandClicked()\" label=\"TABLE.BUTTONS.CHART_ON_DEMAND\"></o-table-option>\n  <mat-divider *ngIf=\" showExportButton || showReportOnDemandButton || showChartsOnDemandButton\"></mat-divider>\n\n  <o-table-option #columnsGroupByOption *ngIf=\"showGroupByButton\" (onClick)=\"onGroupByClicked()\" label=\"TABLE.BUTTONS.GROUPBY\"></o-table-option>\n\n  <button type=\"button\" #filterMenuButton *ngIf=\"showFilterMenu\" mat-menu-item [matMenuTriggerFor]=\"filterMenu\">{{\n    'TABLE.BUTTONS.FILTER' | oTranslate }}</button>\n  <button type=\"button\" #configurationMenuButton *ngIf=\"showConfigurationMenu\" mat-menu-item [matMenuTriggerFor]=\"configurationMenu\">{{\n    'TABLE.BUTTONS.CONFIGURATION' | oTranslate }}</button>\n  <ng-content></ng-content>\n</mat-menu>\n\n<mat-menu #filterMenu=\"matMenu\" [class]=\"(rowHeightObservable| async) +' o-table-menu'\">\n  <o-table-option #columnFilterOption show-checkbox-option=\"true\" [active]=\"isColumnFilterOptionActive\" (onClick)=\"onFilterByColumnClicked()\"\n    label=\"TABLE.BUTTONS.FILTER_BY_COLUMN\">\n  </o-table-option>\n  <button type=\"button\" mat-menu-item (click)=\"onStoreFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_SAVE' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onLoadFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_LOAD' | oTranslate\n    }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onClearFilterClicked()\">{{ 'TABLE.BUTTONS.FILTER_CLEAR' | oTranslate\n    }}</button>\n</mat-menu>\n\n<mat-menu #configurationMenu=\"matMenu\" [class]=\"(rowHeightObservable | async) +' o-table-menu'\">\n  <button type=\"button\" mat-menu-item (click)=\"onStoreConfigurationClicked()\">{{ 'TABLE.BUTTONS.SAVE_CONFIGURATION' |\n    oTranslate }}</button>\n  <button type=\"button\" mat-menu-item (click)=\"onApplyConfigurationClicked()\">{{ 'TABLE.BUTTONS.APPLY_CONFIGURATION' |\n    oTranslate }}</button>\n</mat-menu>\n", styles: [".o-table-menu .mat-divider{margin:0 8px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i1$1.MatDialog }, { type: i0.ChangeDetectorRef }, { type: OTableBase, decorators: [{
                         type: Inject,
@@ -30033,12 +30072,12 @@ class OTableQuickfilterComponent {
     }
 }
 OTableQuickfilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableQuickfilterComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: forwardRef(() => OTableBase) }], target: i0.ɵɵFactoryTarget.Component });
-OTableQuickfilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: { placeholder: "placeholder" }, outputs: { onChange: "onChange" }, host: { properties: { "class.o-table-quickfilter": "true" } }, viewQueries: [{ propertyName: "filter", first: true, predicate: ["filter"], descendants: true }, { propertyName: "matMenu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"quickFilter\" fxLayout=\"row\">\n\n  <mat-form-field appearance=\"outline\">\n    <input matInput #filter [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" placeholder=\"{{ placeholder | oTranslate }}\">\n    <div matPrefix>\n      <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n        <mat-icon class=\"search-icon\">expand_more</mat-icon>\n      </button>\n    </div>\n\n    <mat-menu #menu=\"matMenu\" class=\"o-table-quickfilter-menu\">\n      <div fxLayout=\"column\" class=\"checkbox-container\">\n\n        <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n          {{ 'SELECT_ALL' | oTranslate}}\n        </mat-checkbox>\n        <mat-divider></mat-divider>\n\n        <ng-container *ngFor=\"let column of quickFilterColumns\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(column)\" (change)=\"onCheckboxChange(column, $event)\">\n            {{ column.title | oTranslate }}\n          </mat-checkbox>\n        </ng-container>\n\n        <ng-container *ngIf=\"showCaseSensitiveCheckbox()\">\n          <mat-divider></mat-divider>\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"oTableOptions.filterCaseSensitive\"\n            (change)=\"oTableOptions.filterCaseSensitive = $event.checked\">\n            {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate}}\n          </mat-checkbox>\n        </ng-container>\n      </div>\n    </mat-menu>\n  </mat-form-field>\n</div>\n", styles: [".o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-self:center;padding:0;min-height:30px;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{padding-left:10px;padding-right:10px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-table-quickfilter-menu .checkbox-container{padding:6px 12px}.o-table-quickfilter-menu .checkbox-container .mat-divider{margin:8px 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: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableQuickfilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: { placeholder: "placeholder" }, outputs: { onChange: "onChange" }, host: { properties: { "class.o-table-quickfilter": "true" } }, viewQueries: [{ propertyName: "filter", first: true, predicate: ["filter"], descendants: true }, { propertyName: "matMenu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"quickFilter\" fxLayout=\"row\">\n\n  <mat-form-field appearance=\"outline\">\n    <input matInput #filter [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" placeholder=\"{{ placeholder | oTranslate }}\">\n    <div matPrefix>\n      <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n      <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n        <mat-icon class=\"search-icon\">expand_more</mat-icon>\n      </button>\n    </div>\n\n    <mat-menu #menu=\"matMenu\" class=\"o-table-quickfilter-menu\">\n      <div fxLayout=\"column\" class=\"checkbox-container\">\n\n        <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n          {{ 'SELECT_ALL' | oTranslate}}\n        </mat-checkbox>\n        <mat-divider></mat-divider>\n\n        <ng-container *ngFor=\"let column of quickFilterColumns\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(column)\" (change)=\"onCheckboxChange(column, $event)\">\n            {{ column.title | oTranslate }}\n          </mat-checkbox>\n        </ng-container>\n\n        <ng-container *ngIf=\"showCaseSensitiveCheckbox()\">\n          <mat-divider></mat-divider>\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"oTableOptions.filterCaseSensitive\"\n            (change)=\"oTableOptions.filterCaseSensitive = $event.checked\">\n            {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate}}\n          </mat-checkbox>\n        </ng-container>\n      </div>\n    </mat-menu>\n  </mat-form-field>\n</div>\n", styles: [".o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-self:center;padding:0;min-height:30px;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{padding-left:10px;padding-right:10px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-table-quickfilter-menu .checkbox-container{padding:6px 12px}.o-table-quickfilter-menu .checkbox-container .mat-divider{margin:8px 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: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OTableQuickfilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-table-quickfilter', inputs: DEFAULT_INPUTS_O_TABLE_QUICKFILTER, outputs: DEFAULT_OUTPUTS_O_TABLE_QUICKFILTER, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.o-table-quickfilter]': 'true',
-                    }, template: "<div class=\"quickFilter\" fxLayout=\"row\">\n\n  <mat-form-field appearance=\"outline\">\n    <input matInput #filter [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" placeholder=\"{{ placeholder | oTranslate }}\">\n    <div matPrefix>\n      <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n        <mat-icon class=\"search-icon\">expand_more</mat-icon>\n      </button>\n    </div>\n\n    <mat-menu #menu=\"matMenu\" class=\"o-table-quickfilter-menu\">\n      <div fxLayout=\"column\" class=\"checkbox-container\">\n\n        <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n          {{ 'SELECT_ALL' | oTranslate}}\n        </mat-checkbox>\n        <mat-divider></mat-divider>\n\n        <ng-container *ngFor=\"let column of quickFilterColumns\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(column)\" (change)=\"onCheckboxChange(column, $event)\">\n            {{ column.title | oTranslate }}\n          </mat-checkbox>\n        </ng-container>\n\n        <ng-container *ngIf=\"showCaseSensitiveCheckbox()\">\n          <mat-divider></mat-divider>\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"oTableOptions.filterCaseSensitive\"\n            (change)=\"oTableOptions.filterCaseSensitive = $event.checked\">\n            {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate}}\n          </mat-checkbox>\n        </ng-container>\n      </div>\n    </mat-menu>\n  </mat-form-field>\n</div>\n", styles: [".o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-self:center;padding:0;min-height:30px;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{padding-left:10px;padding-right:10px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-table-quickfilter-menu .checkbox-container{padding:6px 12px}.o-table-quickfilter-menu .checkbox-container .mat-divider{margin:8px 0}\n"] }]
+                    }, template: "<div class=\"quickFilter\" fxLayout=\"row\">\n\n  <mat-form-field appearance=\"outline\">\n    <input matInput #filter [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" placeholder=\"{{ placeholder | oTranslate }}\">\n    <div matPrefix>\n      <mat-icon svgIcon=\"ontimize:search\" [matBadge]=\"areAllColumnsChecked()?'':getCountColumnsChecked()\" matBadgeSize=\"small\"></mat-icon>\n      <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (click)=\"$event.stopPropagation()\">\n        <mat-icon class=\"search-icon\">expand_more</mat-icon>\n      </button>\n    </div>\n\n    <mat-menu #menu=\"matMenu\" class=\"o-table-quickfilter-menu\">\n      <div fxLayout=\"column\" class=\"checkbox-container\">\n\n        <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"areAllColumnsChecked()\" (change)=\"onSelectAllChange($event)\">\n          {{ 'SELECT_ALL' | oTranslate}}\n        </mat-checkbox>\n        <mat-divider></mat-divider>\n\n        <ng-container *ngFor=\"let column of quickFilterColumns\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"isChecked(column)\" (change)=\"onCheckboxChange(column, $event)\">\n            {{ column.title | oTranslate }}\n          </mat-checkbox>\n        </ng-container>\n\n        <ng-container *ngIf=\"showCaseSensitiveCheckbox()\">\n          <mat-divider></mat-divider>\n          <mat-checkbox (click)=\"$event.stopPropagation()\" [checked]=\"oTableOptions.filterCaseSensitive\"\n            (change)=\"oTableOptions.filterCaseSensitive = $event.checked\">\n            {{ 'TABLE.FILTER.CASE_SENSITIVE' | oTranslate}}\n          </mat-checkbox>\n        </ng-container>\n      </div>\n    </mat-menu>\n  </mat-form-field>\n</div>\n", styles: [".o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-self:center;padding:0;min-height:30px;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix{padding-left:10px;padding-right:10px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div{align-items:center;display:flex}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-icon,.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div button{margin-right:6px}.o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix div .mat-badge-content{background-color:#3c8500;width:14px;height:14px;line-height:14px;top:-4px;right:-4px}.o-table-quickfilter-menu .checkbox-container{padding:6px 12px}.o-table-quickfilter-menu .checkbox-container .mat-divider{margin:8px 0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: OTableBase, decorators: [{
                         type: Inject,
@@ -30605,11 +30644,11 @@ const DEFAULT_OUTPUTS_O_TABLE = [
     'onRowDeselected',
     'onRowDeleted'
 ];
-const stickyHeaderSelector = '.mat-header-row .mat-table-sticky';
-const stickyFooterSelector = '.mat-footer-row .mat-table-sticky';
-const rowSelector = '.mat-row';
-const headerSelector = '.mat-header-row';
-const footerSelector = '.mat-footer-row';
+const stickyHeaderSelector = '.mat-mdc-header-row .mat-mdc-table-sticky';
+const stickyFooterSelector = '.mat-mdc-footer-row .mat-mdc-table-sticky';
+const rowSelector = '.mat-mdc-row';
+const headerSelector = '.mat-mdc-header-row';
+const footerSelector = '.mat-mdc-header-row';
 class OTableComponent extends AbstractOServiceComponent {
     set cdkVirtualScrollViewport(value) {
         if (value != this.virtualScrollViewport) {
@@ -32949,7 +32988,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: "sort", 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 }], 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\" #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    <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\" [diameter]=\"diameterSpinner\"></mat-progress-spinner>\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 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:not(.o-column-image):first-of-type,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell:not(.o-column-image):first-of-type{padding-left:24px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-of-type,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.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:18px}.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$1.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$1.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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.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: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i15.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i15.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i19.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: "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: "sort", 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 }], 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\" #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    <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\" [diameter]=\"diameterSpinner\"></mat-progress-spinner>\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 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$1.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$1.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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.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: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i15.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i15.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i19.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: "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: '*' })),
@@ -33090,7 +33129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         '[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\" #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    <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\" [diameter]=\"diameterSpinner\"></mat-progress-spinner>\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 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:not(.o-column-image):first-of-type,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell:not(.o-column-image):first-of-type{padding-left:24px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-of-type,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.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:18px}.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\" #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    <mat-progress-spinner mode=\"indeterminate\" strokeWidth=\"3\" [diameter]=\"diameterSpinner\"></mat-progress-spinner>\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 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"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: OFormComponent, decorators: [{
                         type: Optional
@@ -37453,7 +37492,7 @@ class OAppSidenavComponent {
 OAppSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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[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);-moz-transform:translate3d(-181px,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'\">\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[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)
@@ -37464,7 +37503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         '[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[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);-moz-transform:translate3d(-181px,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'\">\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[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]
@@ -38303,5 +38342,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, 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_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_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, 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, 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, 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, OTableStoreConfigurationDialogComponent, OTableVirtualScrollStrategy, OTableVisibleColumnsDialogComponent, OTextInputComponent, OTextInputModule, OTextareaInputComponent, OTextareaInputModule, OTimeInputComponent, OTimeInputModule, OTranslateHttpLoader, OTranslateModule, OTranslateParser, OTranslatePipe, OTranslateService, 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_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_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, 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, 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, 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, OTableStoreConfigurationDialogComponent, OTableVirtualScrollStrategy, OTableVisibleColumnsDialogComponent, OTextInputComponent, OTextInputModule, OTextareaInputComponent, OTextareaInputModule, OTimeInputComponent, OTimeInputModule, OTranslateHttpLoader, OTranslateModule, OTranslateParser, OTranslatePipe, OTranslateService, 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 };
 //# sourceMappingURL=ontimize-web-ngx.mjs.map