ontimize-web-ngx 15.0.3 → 15.0.4

package/fesm2015/ontimize-web-ngx.mjs

@@ -109,7 +109,7 @@ import { CdkTableModule } from '@angular/cdk/table';
 import * as i3$5 from '@angular/cdk/a11y';
 import { FlatTreeControl, CdkTreeModule } from '@angular/cdk/tree';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import * as i9$2 from '@angular/material/tree';
+import * as i10$2 from '@angular/material/tree';
 import { MatTreeModule } from '@angular/material/tree';
 
 class Base64 {
@@ -3302,6 +3302,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
+class FilterExpressionUtils {
+    static instanceofBasicExpression(arg) {
+        return arg.hasOwnProperty(FilterExpressionUtils.BASIC_EXPRESSION_KEY)
+            && FilterExpressionUtils.instanceofExpression(arg[FilterExpressionUtils.BASIC_EXPRESSION_KEY]);
+    }
+    static buildBasicExpression(exp) {
+        if (exp) {
+            if (!FilterExpressionUtils.instanceofExpression(exp)) {
+                console.error('The expression provided is not an instance of \'Expression\'');
+            }
+            const be = {
+                '@basic_expression': exp
+            };
+            return be;
+        }
+        return undefined;
+    }
+    static instanceofFilterExpression(exp) {
+        return exp.hasOwnProperty(FilterExpressionUtils.FILTER_EXPRESSION_KEY)
+            && FilterExpressionUtils.instanceofExpression(exp[FilterExpressionUtils.FILTER_EXPRESSION_KEY]);
+    }
+    static buildFilterExpression(exp) {
+        if (exp) {
+            if (!FilterExpressionUtils.instanceofExpression(exp)) {
+                console.error('The expression provided is not an instance of \'Expression\'');
+            }
+            const be = {
+                '@filter_expression': exp
+            };
+            return be;
+        }
+        return undefined;
+    }
+    static instanceofExpression(exp) {
+        return exp.hasOwnProperty('lop') && exp.hasOwnProperty('op');
+    }
+    static buildComplexExpression(expr1, expr2, op) {
+        if (expr1.lop === undefined && expr1.op === undefined) {
+            return expr2;
+        }
+        if (expr2.lop === undefined && expr2.op === undefined) {
+            return expr1;
+        }
+        const expr = {
+            lop: expr1,
+            op: op,
+            rop: expr2
+        };
+        return expr;
+    }
+    static buildExpressionEquals(key, value) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_EQUAL,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionIsNotNull(key) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_NOT_NULL
+        };
+        return expr;
+    }
+    static buildExpressionIsNull(key) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_NULL
+        };
+        return expr;
+    }
+    static buildExpressionLess(key, value) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_LESS,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionLessEqual(key, value) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_LESS_EQUAL,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionMore(key, value) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_MORE,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionMoreEqual(key, value) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_MORE_EQUAL,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionIn(key, values) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_IN,
+            rop: values
+        };
+        return expr;
+    }
+    static buildExpressionNotLike(key, value) {
+        if (value !== undefined) {
+            value = value.replace(new RegExp('\\*', 'g'), '%');
+            if (value.indexOf('%') === -1) {
+                value = '%' + value + '%';
+            }
+        }
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_NOT_LIKE,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionLike(key, value) {
+        if (value !== undefined) {
+            value = value.replace(new RegExp('\\*', 'g'), '%');
+            if (value.indexOf('%') === -1) {
+                value = '%' + value + '%';
+            }
+        }
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_LIKE,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionLikeEnd(key, value) {
+        if (value !== undefined) {
+            value = '%' + value;
+        }
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_LIKE,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionLikeStart(key, value) {
+        if (value !== undefined) {
+            value = value + '%';
+        }
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_LIKE,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionNotEquals(key, value) {
+        const expr = {
+            lop: key,
+            op: FilterExpressionUtils.OP_NOT_EQUAL,
+            rop: value
+        };
+        return expr;
+    }
+    static buildExpressionNullAndValue(key, value, op) {
+        const isNull = FilterExpressionUtils.buildExpressionIsNull(key);
+        const equals = FilterExpressionUtils.buildExpressionEquals(key, value);
+        const expr = {
+            lop: isNull,
+            op: op,
+            rop: equals
+        };
+        return expr;
+    }
+    static buildArrayExpressionLike(keys, value) {
+        let result = {
+            lop: undefined,
+            op: undefined
+        };
+        keys.forEach((col) => {
+            result = FilterExpressionUtils.stackExpressionLikeOR(col, value, result);
+        });
+        return result;
+    }
+    static buildExpressionFromObject(obj) {
+        let result = {
+            lop: undefined,
+            op: undefined
+        };
+        Object.keys(obj || {}).forEach((key) => {
+            result = FilterExpressionUtils.stackExpressionEqualsAND(key, obj[key], result);
+        });
+        return result;
+    }
+    static stackExpressionLikeOR(key, value, expr) {
+        const likeExpr = FilterExpressionUtils.buildExpressionLike(key, value);
+        if (expr.lop === undefined && expr.op === undefined) {
+            return likeExpr;
+        }
+        else {
+            expr = FilterExpressionUtils.buildComplexExpression(expr, likeExpr, FilterExpressionUtils.OP_OR);
+        }
+        return expr;
+    }
+    static stackExpressionEqualsAND(key, value, expr) {
+        const equalsExpr = FilterExpressionUtils.buildExpressionEquals(key, value);
+        if (expr.lop === undefined && expr.op === undefined) {
+            return equalsExpr;
+        }
+        else {
+            expr = FilterExpressionUtils.buildComplexExpression(expr, equalsExpr, FilterExpressionUtils.OP_AND);
+        }
+        return expr;
+    }
+}
+FilterExpressionUtils.BASIC_EXPRESSION_KEY = '@basic_expression';
+FilterExpressionUtils.FILTER_EXPRESSION_KEY = '@filter_expression';
+FilterExpressionUtils.OP_OR = 'OR';
+FilterExpressionUtils.OP_AND = 'AND';
+FilterExpressionUtils.OP_LIKE = 'LIKE';
+FilterExpressionUtils.OP_NOT_LIKE = 'NOT LIKE';
+FilterExpressionUtils.OP_EQUAL = '=';
+FilterExpressionUtils.OP_NOT_EQUAL = '<>';
+FilterExpressionUtils.OP_NULL = 'IS NULL';
+FilterExpressionUtils.OP_NOT_NULL = 'IS NOT NULL';
+FilterExpressionUtils.OP_LESS = '<';
+FilterExpressionUtils.OP_LESS_EQUAL = '<=';
+FilterExpressionUtils.OP_MORE = '>';
+FilterExpressionUtils.OP_MORE_EQUAL = '>=';
+FilterExpressionUtils.OP_IN = 'IN';
+
 class OntimizeExportDataBaseProviderService {
     constructor(injector) {
         this.injector = injector;
@@ -3316,7 +3553,37 @@ class OntimizeExportDataBaseProviderService {
         this.sqlTypes = this.table.getSqlTypes();
         this.entity = this.table.entity;
         this.service = this.table.service;
-        this.filter = this.table.getComponentFilter();
+        this.filter = this.getFilterWithBasicExpression();
+    }
+    getFilterWithBasicExpression() {
+        let filter = this.table.getComponentFilter();
+        if (Object.keys(filter).length > 0) {
+            const parentItemExpr = FilterExpressionUtils.buildExpressionFromObject(filter);
+            filter = {};
+            filter[FilterExpressionUtils.FILTER_EXPRESSION_KEY] = parentItemExpr;
+        }
+        const beColFilter = this.table.getColumnFiltersExpression();
+        if (beColFilter && !Util.isDefined(filter[FilterExpressionUtils.FILTER_EXPRESSION_KEY])) {
+            filter[FilterExpressionUtils.FILTER_EXPRESSION_KEY] = beColFilter;
+        }
+        else if (beColFilter) {
+            filter[FilterExpressionUtils.FILTER_EXPRESSION_KEY] =
+                FilterExpressionUtils.buildComplexExpression(filter[FilterExpressionUtils.FILTER_EXPRESSION_KEY], beColFilter, FilterExpressionUtils.OP_AND);
+        }
+        const quickFilterExpr = Util.isDefined(this.table.oTableQuickFilterComponent) ? this.table.oTableQuickFilterComponent.filterExpression : undefined;
+        const filterBuilderExpr = Util.isDefined(this.table.filterBuilder) ? this.table.filterBuilder.getExpression() : undefined;
+        let complexExpr = quickFilterExpr || filterBuilderExpr;
+        if (quickFilterExpr && filterBuilderExpr) {
+            complexExpr = FilterExpressionUtils.buildComplexExpression(quickFilterExpr, filterBuilderExpr, FilterExpressionUtils.OP_AND);
+        }
+        if (complexExpr && !Util.isDefined(filter[FilterExpressionUtils.BASIC_EXPRESSION_KEY])) {
+            filter[FilterExpressionUtils.BASIC_EXPRESSION_KEY] = complexExpr;
+        }
+        else if (complexExpr) {
+            filter[FilterExpressionUtils.BASIC_EXPRESSION_KEY] =
+                FilterExpressionUtils.buildComplexExpression(filter[FilterExpressionUtils.BASIC_EXPRESSION_KEY], complexExpr, FilterExpressionUtils.OP_AND);
+        }
+        return filter;
     }
 }
 OntimizeExportDataBaseProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OntimizeExportDataBaseProviderService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -7913,7 +8180,7 @@ class OFormComponent {
         this.headerPosition = 'top';
         this.labelheader = '';
         this.labelHeaderAlign = 'center';
-        this.headeractions = '';
+        this.headeractions = 'all';
         this.showHeaderActionsText = 'yes';
         this.keys = '';
         this.columns = '';
@@ -12880,243 +13147,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }] });
 
-class FilterExpressionUtils {
-    static instanceofBasicExpression(arg) {
-        return arg.hasOwnProperty(FilterExpressionUtils.BASIC_EXPRESSION_KEY)
-            && FilterExpressionUtils.instanceofExpression(arg[FilterExpressionUtils.BASIC_EXPRESSION_KEY]);
-    }
-    static buildBasicExpression(exp) {
-        if (exp) {
-            if (!FilterExpressionUtils.instanceofExpression(exp)) {
-                console.error('The expression provided is not an instance of \'Expression\'');
-            }
-            const be = {
-                '@basic_expression': exp
-            };
-            return be;
-        }
-        return undefined;
-    }
-    static instanceofFilterExpression(exp) {
-        return exp.hasOwnProperty(FilterExpressionUtils.FILTER_EXPRESSION_KEY)
-            && FilterExpressionUtils.instanceofExpression(exp[FilterExpressionUtils.FILTER_EXPRESSION_KEY]);
-    }
-    static buildFilterExpression(exp) {
-        if (exp) {
-            if (!FilterExpressionUtils.instanceofExpression(exp)) {
-                console.error('The expression provided is not an instance of \'Expression\'');
-            }
-            const be = {
-                '@filter_expression': exp
-            };
-            return be;
-        }
-        return undefined;
-    }
-    static instanceofExpression(exp) {
-        return exp.hasOwnProperty('lop') && exp.hasOwnProperty('op');
-    }
-    static buildComplexExpression(expr1, expr2, op) {
-        if (expr1.lop === undefined && expr1.op === undefined) {
-            return expr2;
-        }
-        if (expr2.lop === undefined && expr2.op === undefined) {
-            return expr1;
-        }
-        const expr = {
-            lop: expr1,
-            op: op,
-            rop: expr2
-        };
-        return expr;
-    }
-    static buildExpressionEquals(key, value) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_EQUAL,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionIsNotNull(key) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_NOT_NULL
-        };
-        return expr;
-    }
-    static buildExpressionIsNull(key) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_NULL
-        };
-        return expr;
-    }
-    static buildExpressionLess(key, value) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_LESS,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionLessEqual(key, value) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_LESS_EQUAL,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionMore(key, value) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_MORE,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionMoreEqual(key, value) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_MORE_EQUAL,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionIn(key, values) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_IN,
-            rop: values
-        };
-        return expr;
-    }
-    static buildExpressionNotLike(key, value) {
-        if (value !== undefined) {
-            value = value.replace(new RegExp('\\*', 'g'), '%');
-            if (value.indexOf('%') === -1) {
-                value = '%' + value + '%';
-            }
-        }
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_NOT_LIKE,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionLike(key, value) {
-        if (value !== undefined) {
-            value = value.replace(new RegExp('\\*', 'g'), '%');
-            if (value.indexOf('%') === -1) {
-                value = '%' + value + '%';
-            }
-        }
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_LIKE,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionLikeEnd(key, value) {
-        if (value !== undefined) {
-            value = '%' + value;
-        }
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_LIKE,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionLikeStart(key, value) {
-        if (value !== undefined) {
-            value = value + '%';
-        }
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_LIKE,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionNotEquals(key, value) {
-        const expr = {
-            lop: key,
-            op: FilterExpressionUtils.OP_NOT_EQUAL,
-            rop: value
-        };
-        return expr;
-    }
-    static buildExpressionNullAndValue(key, value, op) {
-        const isNull = FilterExpressionUtils.buildExpressionIsNull(key);
-        const equals = FilterExpressionUtils.buildExpressionEquals(key, value);
-        const expr = {
-            lop: isNull,
-            op: op,
-            rop: equals
-        };
-        return expr;
-    }
-    static buildArrayExpressionLike(keys, value) {
-        let result = {
-            lop: undefined,
-            op: undefined
-        };
-        keys.forEach((col) => {
-            result = FilterExpressionUtils.stackExpressionLikeOR(col, value, result);
-        });
-        return result;
-    }
-    static buildExpressionFromObject(obj) {
-        let result = {
-            lop: undefined,
-            op: undefined
-        };
-        Object.keys(obj || {}).forEach((key) => {
-            result = FilterExpressionUtils.stackExpressionEqualsAND(key, obj[key], result);
-        });
-        return result;
-    }
-    static stackExpressionLikeOR(key, value, expr) {
-        const likeExpr = FilterExpressionUtils.buildExpressionLike(key, value);
-        if (expr.lop === undefined && expr.op === undefined) {
-            return likeExpr;
-        }
-        else {
-            expr = FilterExpressionUtils.buildComplexExpression(expr, likeExpr, FilterExpressionUtils.OP_OR);
-        }
-        return expr;
-    }
-    static stackExpressionEqualsAND(key, value, expr) {
-        const equalsExpr = FilterExpressionUtils.buildExpressionEquals(key, value);
-        if (expr.lop === undefined && expr.op === undefined) {
-            return equalsExpr;
-        }
-        else {
-            expr = FilterExpressionUtils.buildComplexExpression(expr, equalsExpr, FilterExpressionUtils.OP_AND);
-        }
-        return expr;
-    }
-}
-FilterExpressionUtils.BASIC_EXPRESSION_KEY = '@basic_expression';
-FilterExpressionUtils.FILTER_EXPRESSION_KEY = '@filter_expression';
-FilterExpressionUtils.OP_OR = 'OR';
-FilterExpressionUtils.OP_AND = 'AND';
-FilterExpressionUtils.OP_LIKE = 'LIKE';
-FilterExpressionUtils.OP_NOT_LIKE = 'NOT LIKE';
-FilterExpressionUtils.OP_EQUAL = '=';
-FilterExpressionUtils.OP_NOT_EQUAL = '<>';
-FilterExpressionUtils.OP_NULL = 'IS NULL';
-FilterExpressionUtils.OP_NOT_NULL = 'IS NOT NULL';
-FilterExpressionUtils.OP_LESS = '<';
-FilterExpressionUtils.OP_LESS_EQUAL = '<=';
-FilterExpressionUtils.OP_MORE = '>';
-FilterExpressionUtils.OP_MORE_EQUAL = '>=';
-FilterExpressionUtils.OP_IN = 'IN';
-
 class OFilterBuilderBase {
 }
 
@@ -15235,7 +15265,7 @@ class AbstractOServiceBaseComponent {
     }
     ngOnChanges(changes) {
         if (Util.isDefined(changes.staticData)) {
-            this.setDataArray(changes.staticData.currentValue);
+            this.setData(changes.staticData.currentValue);
         }
     }
     beforeunloadHandler() {
@@ -16673,15 +16703,6 @@ class OGridComponent extends AbstractOServiceComponent {
     ngOnDestroy() {
         this.destroy();
     }
-    ngOnChanges(changes) {
-        if (changes.staticData !== undefined) {
-            this.dataResponseArray = changes.staticData.currentValue;
-            this.onDataLoaded.emit(this.dataResponseArray);
-            if (this.quickFilterComponent) {
-                this.filterData();
-            }
-        }
-    }
     destroy() {
         super.destroy();
         if (this.subscription) {
@@ -16809,7 +16830,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\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-grid-button o-grid-add-button no-text\" mat-icon-button\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button no-text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <!--O-GRID-PAGINATOR-->\n      <div class=\"o-grid-paginator\" *ngIf=\"showPageSize\">\n        <div class=\"o-grid-page-size-label\">{{ 'GRID.ITEMS_PER_PAGE' | oTranslate }}:</div>\n        <mat-form-field class=\"o-grid-select-page\">\n          <mat-select placeholder=\"\" #pageSizeSelect [(value)]=\"queryRows\" (selectionChange)=\"pageSizeChanged()\">\n            <mat-option *ngFor=\"let page of pageSizeOptions\" [value]=\"page\">\n              {{ page }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <!--O-GRID-SORT-->\n      <div class=\"o-grid-sort\" *ngIf=\"showSort && sortableColumns.length > 0\">\n        <mat-form-field class=\"o-grid-select-sort\">\n          <mat-icon matPrefix>sort</mat-icon>\n          <mat-select #sortSelect [value]=\"currentOrderColumn\" (selectionChange)=\"sortColumnChanged($event)\"\n            placeholder=\" {{ 'GRID.SORT_BY' | oTranslate }}\">\n            <mat-option *ngFor=\"let column of sortableColumns; let i = index\" [value]=\"i\">\n              {{ getSortOptionText(column) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n    </ng-container>\n    <ng-content select=\"[o-grid-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [columns]=\"quickFilterColumns\" [filter-case-sensitive]=\"filterCaseSensitive\"\n        [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\"\n        float-label=\"never\"></o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n\n  <ng-container *ngIf=\"(loading | async)===false\">\n    <!--no results-->\n    <div class=\"o-grid-no-results fill-remaining\" *ngIf=\"gridItems.length === 0\" fxLayoutAlign=\"center start\" layout-padding>\n      {{'GRID.EMPTY' | oTranslate}}\n      <ng-container *ngIf=\"quickFilter && searchInputComponent && searchInputComponent.getValue() && searchInputComponent.getValue().length > 0\">\n        {{ 'GRID.EMPTY_USING_FILTER' | oTranslate : { values: [ searchInputComponent.getValue()] } }}\n      </ng-container>\n    </div>\n\n\n    <!--MAT-GRID-LIST-->\n    <mat-grid-list [cols]=\"cols\" [gutterSize]=\"gutterSize\" [rowHeight]=\"gridItemHeight\" class=\"o-mat-grid-list fill-remaining\"\n      *ngIf=\"gridItems.length > 0\">\n      <mat-grid-tile o-grid-item *ngFor=\"let item of gridItems\" [colspan]=\"item.colspan\" [rowspan]=\"item.rowspan\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </mat-grid-tile>\n    </mat-grid-list>\n\n    <button type=\"button\" aria-label=\"Insert\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add()\"\n      class=\"o-grid-add-floatable-button\" [class.o-grid-add-bottom-floatable-button]=\"insertButtonPosition ==='bottom'\"\n      [class.o-grid-add-top-floatable-button]=\"insertButtonPosition ==='top'\">\n      <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n    </button>\n\n    <!-- GRID FOOTER -->\n    <div *ngIf=\"!paginationControls && showFooter && (loading | async)===false\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-grid-footer\">\n      <button type=\"button\" mat-button *ngIf=\"getDataArray().length < totalRecords && getDataArray().length>0\" (click)=\"loadMore()\"\n        class=\"mat-raised-button\">\n        {{ 'GRID.BUTTON_NEXT' | oTranslate }}\n      </button>\n      <span fxFlex></span>\n      <span class=\"o-grid-totals\">{{ 'GRID.TEXT_SHOWN_ITEMS' | oTranslate :{values: [getDataArray().length, totalRecords]}\n        }}</span>\n    </div>\n\n    <mat-paginator class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls && showFooter\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n      [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n  </ng-container>\n  <div *ngIf=\"loading | async\" fxLayout=\"row\" fxLayoutAlign=\"center end\" class=\"o-loading-blocker\">\n    <div fxLayoutAlign=\"center center\" [class.o-spinner-container-controls]=\"hasControls()\" class=\"o-spinner-container\">\n      <o-grid-skeleton></o-grid-skeleton>\n    </div>\n  </div>\n\n\n</div>\n", styles: [".o-grid{height:100%}.o-grid .o-grid-container{position:relative;height:100%;display:flex}.o-grid .o-grid-container .o-grid-toolbar .mat-mdc-form-field-subscript-wrapper{display:none}.o-grid .o-grid-container .o-grid-no-results{padding:16px}.o-grid .o-grid-container .o-grid-paginator,.o-grid .o-grid-container .o-grid-sort{margin-right:1em}.o-grid .o-grid-container .o-grid-paginator{display:flex}.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}.o-grid .o-grid-container .o-grid-footer,.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}.o-grid .o-grid-container .o-loading-blocker{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}.o-grid.o-grid-fixed,.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}.o-grid.o-grid-fixed .o-grid-footer,.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}.o-grid .o-grid-add-floatable-button.o-grid-add-top-floatable-button{top:66px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OSearchInputComponent, selector: "o-search-input", inputs: ["placeholder", "label", "width", "float-label", "appearance", "columns", "filter-case-sensitive", "show-case-sensitive-checkbox", "show-menu"], outputs: ["onSearch"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "directive", type: OGridItemDirective, selector: "mat-grid-tile[o-grid-item]" }, { kind: "component", type: OGridSkeletonComponent, selector: "o-grid-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "inputGridItems", predicate: i0.forwardRef(function () { return OGridItemComponent; }) }], viewQueries: [{ propertyName: "matpaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "gridItemDirectives", predicate: OGridItemDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.display]=\"isVisible()? '' : 'none'\" class=\"o-grid-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n  <!--TOOLBAR-->\n  <o-data-toolbar *ngIf=\"hasControls()\" class=\"o-grid-toolbar\" [title]=\"title\" [show-title]=\"hasTitle()\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-grid-add-button o-grid-button text\" mat-stroked-button\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <!-- button new-->\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-grid-button o-grid-add-button no-text\" mat-icon-button\n          aria-label=\"Insert\" (click)=\"add()\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <!--button refresh-->\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\" class=\"o-grid-button no-text\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <!--O-GRID-PAGINATOR-->\n      <div class=\"o-grid-paginator\" *ngIf=\"showPageSize\">\n        <div class=\"o-grid-page-size-label\">{{ 'GRID.ITEMS_PER_PAGE' | oTranslate }}:</div>\n        <mat-form-field class=\"o-grid-select-page\">\n          <mat-select placeholder=\"\" #pageSizeSelect [(value)]=\"queryRows\" (selectionChange)=\"pageSizeChanged()\">\n            <mat-option *ngFor=\"let page of pageSizeOptions\" [value]=\"page\">\n              {{ page }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <!--O-GRID-SORT-->\n      <div class=\"o-grid-sort\" *ngIf=\"showSort && sortableColumns.length > 0\">\n        <mat-form-field class=\"o-grid-select-sort\">\n          <mat-icon matPrefix>sort</mat-icon>\n          <mat-select #sortSelect [value]=\"currentOrderColumn\" (selectionChange)=\"sortColumnChanged($event)\"\n            placeholder=\" {{ 'GRID.SORT_BY' | oTranslate }}\">\n            <mat-option *ngFor=\"let column of sortableColumns; let i = index\" [value]=\"i\">\n              {{ getSortOptionText(column) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n    </ng-container>\n    <ng-content select=\"[o-grid-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-grid-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [columns]=\"quickFilterColumns\" [filter-case-sensitive]=\"filterCaseSensitive\"\n        [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\"\n        float-label=\"never\"></o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n\n  <ng-container *ngIf=\"(loading | async)===false\">\n    <!--no results-->\n    <div class=\"o-grid-no-results fill-remaining\" *ngIf=\"gridItems.length === 0\" fxLayoutAlign=\"center start\" layout-padding>\n      {{'GRID.EMPTY' | oTranslate}}\n      <ng-container *ngIf=\"quickFilter && searchInputComponent && searchInputComponent.getValue() && searchInputComponent.getValue().length > 0\">\n        {{ 'GRID.EMPTY_USING_FILTER' | oTranslate : { values: [ searchInputComponent.getValue()] } }}\n      </ng-container>\n    </div>\n\n\n    <!--MAT-GRID-LIST-->\n    <mat-grid-list [cols]=\"cols\" [gutterSize]=\"gutterSize\" [rowHeight]=\"gridItemHeight\" class=\"o-mat-grid-list fill-remaining\"\n      *ngIf=\"gridItems.length > 0\">\n      <mat-grid-tile o-grid-item *ngFor=\"let item of gridItems\" [colspan]=\"item.colspan\" [rowspan]=\"item.rowspan\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </mat-grid-tile>\n    </mat-grid-list>\n\n    <button type=\"button\" aria-label=\"Insert\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add()\"\n      class=\"o-grid-add-floatable-button\" [class.o-grid-add-bottom-floatable-button]=\"insertButtonPosition ==='bottom'\"\n      [class.o-grid-add-top-floatable-button]=\"insertButtonPosition ==='top'\">\n      <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n    </button>\n\n    <!-- GRID FOOTER -->\n    <div *ngIf=\"!paginationControls && showFooter && (loading | async)===false\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-grid-footer\">\n      <button type=\"button\" mat-button *ngIf=\"getDataArray().length < totalRecords && getDataArray().length>0\" (click)=\"loadMore()\"\n        class=\"mat-raised-button\">\n        {{ 'GRID.BUTTON_NEXT' | oTranslate }}\n      </button>\n      <span fxFlex></span>\n      <span class=\"o-grid-totals\">{{ 'GRID.TEXT_SHOWN_ITEMS' | oTranslate :{values: [getDataArray().length, totalRecords]}\n        }}</span>\n    </div>\n\n    <mat-paginator class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls && showFooter\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n      [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n  </ng-container>\n  <div *ngIf=\"loading | async\" fxLayout=\"row\" fxLayoutAlign=\"center end\" class=\"o-loading-blocker\">\n    <div fxLayoutAlign=\"center center\" [class.o-spinner-container-controls]=\"hasControls()\" class=\"o-spinner-container\">\n      <o-grid-skeleton></o-grid-skeleton>\n    </div>\n  </div>\n\n\n</div>\n", styles: [".o-grid{height:100%}.o-grid .o-grid-container{position:relative;height:100%;display:flex}.o-grid .o-grid-container .o-grid-toolbar .mat-mdc-form-field-subscript-wrapper{display:none}.o-grid .o-grid-container .o-grid-no-results{padding:16px}.o-grid .o-grid-container .o-grid-paginator,.o-grid .o-grid-container .o-grid-sort{margin-right:1em}.o-grid .o-grid-container .o-grid-paginator{display:flex}.o-grid .o-grid-container .o-grid-paginator .o-grid-select-page{width:60px}.o-grid .o-grid-container .o-grid-paginator .o-grid-page-size-label{margin:0 4px 0 8px;align-self:center}.o-grid .o-grid-container .o-grid-footer .o-grid-totals{margin-right:8px;font-size:14px}.o-grid .o-grid-container .o-grid-footer,.o-grid .o-grid-container .o-mat-paginator{flex-shrink:0}.o-grid .o-grid-container .o-loading-blocker{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container{width:100%;height:100%}.o-grid .o-grid-container .o-loading-blocker .o-spinner-container.o-spinner-container-controls{height:calc(100% - 64px)}.o-grid.o-grid-fixed,.o-grid.o-grid-fixed .o-grid-container{max-height:100%;height:100%}.o-grid.o-grid-fixed .o-mat-grid-list{overflow:auto;padding-bottom:0!important}.o-grid.o-grid-fixed .o-grid-footer,.o-grid.o-grid-fixed .o-mat-paginator{flex:0 0 auto}.o-grid .o-grid-add-floatable-button{right:12px;position:absolute}.o-grid .o-grid-add-floatable-button.o-grid-add-bottom-floatable-button{bottom:36px}.o-grid .o-grid-add-floatable-button.o-grid-add-top-floatable-button{top:66px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OSearchInputComponent, selector: "o-search-input", inputs: ["placeholder", "label", "width", "float-label", "appearance", "columns", "filter-case-sensitive", "show-case-sensitive-checkbox", "show-menu"], outputs: ["onSearch"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "directive", type: OGridItemDirective, selector: "mat-grid-tile[o-grid-item]" }, { kind: "component", type: OGridSkeletonComponent, selector: "o-grid-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -19291,6 +19312,7 @@ class DaterangepickerComponent {
         this.leftCalendar = {};
         this.rightCalendar = {};
         this.showCalInRanges = false;
+        this.adjustedDaysOfWeek = [];
         this.options = {};
         this.choosedDate = new EventEmitter();
         this.rangeClicked = new EventEmitter();
@@ -19299,14 +19321,14 @@ class DaterangepickerComponent {
     ngOnInit() {
         this._buildLocale();
         const daysOfWeek = [...this.locale.daysOfWeek];
+        this.adjustedDaysOfWeek = [...daysOfWeek];
         if (this.locale.firstDay !== 0) {
             let iterator = this.locale.firstDay;
             while (iterator > 0) {
-                daysOfWeek.push(daysOfWeek.shift());
+                this.adjustedDaysOfWeek.push(this.adjustedDaysOfWeek.shift());
                 iterator--;
             }
         }
-        this.locale.daysOfWeek = daysOfWeek;
         if (this.inline) {
             this._old.start = this.startDate.clone();
             this._old.end = this.endDate.clone();
@@ -20146,7 +20168,7 @@ DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DaterangepickerComponent),
             multi: true
-        }], viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;border-width:0;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\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: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+        }], viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of adjustedDaysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;border-width:0;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\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: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -20159,7 +20181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DaterangepickerComponent),
                             multi: true
-                        }], template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;border-width:0;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\n"] }]
+                        }], template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of adjustedDaysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;border-width:0;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dateLimit: [{
                 type: Input
             }], minDate: [{
@@ -25508,15 +25530,6 @@ class OListComponent extends AbstractOServiceComponent {
         this.destroy();
         this.subscription.unsubscribe();
     }
-    ngOnChanges(changes) {
-        if (changes.staticData !== undefined) {
-            this.dataResponseArray = changes.staticData.currentValue;
-            this.onDataLoaded.emit(this.dataResponseArray);
-            if (this.quickFilterComponent) {
-                this.filterData();
-            }
-        }
-    }
     getComponentKey() {
         return 'OListComponent_' + this.oattr;
     }
@@ -25690,7 +25703,7 @@ OListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         OntimizeServiceProvider,
         ComponentStateServiceProvider,
         { provide: O_COMPONENT_STATE_SERVICE, useClass: OListComponentStateService },
-    ], queries: [{ propertyName: "listItemDirectives", predicate: OListItemDirective }], usesInheritance: true, 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    <o-list-skeleton></o-list-skeleton>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"hasTitle()\" class=\"o-list-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" class=\"o-list-button text\" type=\"button\" mat-stroked-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <button type=\"button\" mat-stroked-button class=\"o-list-button text\" aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button text\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" class=\"o-list-button no-text\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n    </ng-container>\n    <ng-content select=\"[o-list-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n        [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\" float-label=\"never\">\n      </o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n  <ng-container *ngIf=\"(loading | async) === false\">\n  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" >\n    <!--MAT-LIST-->\n    <mat-list (scroll)=\"onScroll($event)\" [class.selectable]=\"selectable\"\n      [class.o-list-item-has-buttons]=\"insertButton && (editButtonInRow || detailButtonInRow)\">\n\n      <mat-list-item *ngIf=\"!getDataArray().length\" fxLayout=\"row\" fxLayoutAlign=\"center center\" style=\"cursor: default;\">\n        <h3 matListItemTitle fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          {{ 'TABLE.EMPTY' | oTranslate }}\n          <ng-container *ngIf=\"getQuickFilterValue().length > 0\">\n            {{ 'TABLE.EMPTY_USING_FILTER' | oTranslate : {values: [getQuickFilterValue()]} }}\n          </ng-container>\n        </h3>\n      </mat-list-item>\n      <ng-content></ng-content>\n    </mat-list>\n  </div>\n  <mat-paginator fxFlex=\"0 1 auto\" class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n\n  <!--INSERT BUTTON -->\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add($event)\" class=\"add-button add-button-bottom\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n</ng-container>\n</div>\n", styles: ["::-webkit-input-placeholder{color:#8e0c39}:-moz-placeholder{color:#8e0c39;opacity:1}::-moz-placeholder{color:#8e0c39;opacity:1}:-ms-input-placeholder{color:#8e0c39}:placeholder-shown{color:#8e0c39}.o-list-container{position:relative;flex-direction:column}.o-list-container .spinner-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:500}.o-list-container .spinner-container:not(.pageable-loading){top:0}.o-list-container .spinner-container path{stroke-width:5px!important}.o-list-container .mat-mdc-list{overflow:auto}.o-list-container .mat-mdc-list .mdc-list-item--with-three-lines .o-custom-list-item{position:relative}.o-list-container .mat-mdc-list .o-custom-list-item{max-width:100%;width:100%}.o-list-container .mat-mdc-list .o-custom-list-item .o-list-item-icon{cursor:pointer;padding-right:6px}.o-list-container .mat-mdc-list.o-list-item-has-buttons .o-list-item .mat-mdc-list-item{padding-right:72px}.o-list-container .mat-mdc-list .o-list-item.mat-mdc-card{margin:6px 0;padding-bottom:16px}.o-list-container .mat-mdc-list .o-list-item .mat-mdc-list-item .mat-mdc-list-item-unscoped-content{display:flex;align-items:center}.o-list-container .add-button{right:12px;position:absolute}.o-list-container .add-button.add-button-bottom{bottom:12px}.o-list-container .add-button.add-button-top{top:88px}.o-list-container .o-mat-paginator~.add-button.add-button-bottom{bottom:68px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OSearchInputComponent, selector: "o-search-input", inputs: ["placeholder", "label", "width", "float-label", "appearance", "columns", "filter-case-sensitive", "show-case-sensitive-checkbox", "show-menu"], outputs: ["onSearch"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OListSkeletonComponent, selector: "o-list-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "listItemDirectives", predicate: OListItemDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-list-container\" [style.display]=\"isVisible()? '' : 'none'\" fxFill>\n  <div *ngIf=\"loading | async\" fxLayoutAlign=\"center center\" [class.pageable-loading]=\"pageable && state.queryRecordOffset > 0\"\n    class=\"spinner-container\">\n    <o-list-skeleton></o-list-skeleton>\n  </div>\n  <o-data-toolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"hasTitle()\" class=\"o-list-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" class=\"o-list-button text\" type=\"button\" mat-stroked-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'ADD' | oTranslate }}</span>\n        </button>\n\n        <button type=\"button\" mat-stroked-button class=\"o-list-button text\" aria-label=\"Refresh\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button text\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton && !insertButtonFloatable\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Insert\"\n          (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button type=\"button\" mat-icon-button aria-label=\"Refresh\" class=\"o-list-button no-text\" (click)=\"reloadData()\" *ngIf=\"refreshButton\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" class=\"o-list-button no-text\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\" (click)=\"remove()\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n    </ng-container>\n    <ng-content select=\"[o-list-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-list-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n        [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" [appearance]=\"quickFilterAppearance\" float-label=\"never\">\n      </o-search-input>\n    </ng-container>\n  </o-data-toolbar>\n  <ng-container *ngIf=\"(loading | async) === false\">\n  <div fxLayout=\"column\" class=\"o-list-content\" fxFlex=\"1 1 100%\" >\n    <!--MAT-LIST-->\n    <mat-list (scroll)=\"onScroll($event)\" [class.selectable]=\"selectable\"\n      [class.o-list-item-has-buttons]=\"insertButton && (editButtonInRow || detailButtonInRow)\">\n\n      <mat-list-item *ngIf=\"!getDataArray().length\" fxLayout=\"row\" fxLayoutAlign=\"center center\" style=\"cursor: default;\">\n        <h3 matListItemTitle fxLayout=\"row\" fxLayoutAlign=\"center center\">\n          {{ 'TABLE.EMPTY' | oTranslate }}\n          <ng-container *ngIf=\"getQuickFilterValue().length > 0\">\n            {{ 'TABLE.EMPTY_USING_FILTER' | oTranslate : {values: [getQuickFilterValue()]} }}\n          </ng-container>\n        </h3>\n      </mat-list-item>\n      <ng-content></ng-content>\n    </mat-list>\n  </div>\n  <mat-paginator fxFlex=\"0 1 auto\" class=\"o-mat-paginator\" #paginator *ngIf=\"paginationControls\" [length]=\"totalRecords\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"pageSizeOptions\" [pageIndex]=\"currentPage\" [showFirstLastButtons]=\"true\" (page)=\"onChangePage($event)\"></mat-paginator>\n\n  <!--INSERT BUTTON -->\n  <button type=\"button\" *ngIf=\"insertButton && insertButtonFloatable\" mat-fab (click)=\"add($event)\" class=\"add-button add-button-bottom\"\n    [class.add-button-bottom]=\"insertButtonPosition ==='bottom'\" [class.add-button-top]=\"insertButtonPosition ==='top'\">\n    <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n  </button>\n</ng-container>\n</div>\n", styles: ["::-webkit-input-placeholder{color:#8e0c39}:-moz-placeholder{color:#8e0c39;opacity:1}::-moz-placeholder{color:#8e0c39;opacity:1}:-ms-input-placeholder{color:#8e0c39}:placeholder-shown{color:#8e0c39}.o-list-container{position:relative;flex-direction:column}.o-list-container .spinner-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:500}.o-list-container .spinner-container:not(.pageable-loading){top:0}.o-list-container .spinner-container path{stroke-width:5px!important}.o-list-container .mat-mdc-list{overflow:auto}.o-list-container .mat-mdc-list .mdc-list-item--with-three-lines .o-custom-list-item{position:relative}.o-list-container .mat-mdc-list .o-custom-list-item{max-width:100%;width:100%}.o-list-container .mat-mdc-list .o-custom-list-item .o-list-item-icon{cursor:pointer;padding-right:6px}.o-list-container .mat-mdc-list.o-list-item-has-buttons .o-list-item .mat-mdc-list-item{padding-right:72px}.o-list-container .mat-mdc-list .o-list-item.mat-mdc-card{margin:6px 0;padding-bottom:16px}.o-list-container .mat-mdc-list .o-list-item .mat-mdc-list-item .mat-mdc-list-item-unscoped-content{display:flex;align-items:center}.o-list-container .add-button{right:12px;position:absolute}.o-list-container .add-button.add-button-bottom{bottom:12px}.o-list-container .add-button.add-button-top{top:88px}.o-list-container .o-mat-paginator~.add-button.add-button-bottom{bottom:68px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OSearchInputComponent, selector: "o-search-input", inputs: ["placeholder", "label", "width", "float-label", "appearance", "columns", "filter-case-sensitive", "show-case-sensitive-checkbox", "show-menu"], outputs: ["onSearch"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OListSkeletonComponent, selector: "o-list-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -30417,26 +30430,25 @@ class OTableColumnResizerComponent {
             return;
         }
         const DOMWidth = this.table.getClientWidthColumn(this.column);
-        this.startX = startEvent.screenX;
+        this.startX = (startEvent instanceof MouseEvent) ? startEvent.screenX : startEvent.touches[0].screenX;
         this.startWidth = DOMWidth;
         this.minWidth = this.column.getMinWidthValue();
         this.initializeWidthData();
         this.ngZone.runOutsideAngular(() => {
-            this.dragListeners.push(this.renderer.listen('document', 'mouseup', (e) => this.stopDragging()));
+            this.dragListeners.push(this.renderer.listen('document', 'mouseup', () => this.stopDragging()));
+            this.dragListeners.push(this.renderer.listen('document', 'touchend', () => this.stopDragging()));
         });
-        if (!(startEvent instanceof MouseEvent)) {
-            return;
-        }
+        const moveEvent = (startEvent instanceof MouseEvent) ? 'mousemove' : 'touchmove';
         this.ngZone.runOutsideAngular(() => {
-            this.dragListeners.push(this.renderer.listen('document', 'mousemove', (e) => this.resizeEvent(e)));
+            this.dragListeners.push(this.renderer.listen('document', moveEvent, (e) => this.resizeEvent(e)));
         });
         this.isResizing = true;
     }
     resizeEvent(event) {
-        if (!this.isResizing || !(event instanceof MouseEvent)) {
+        if (!this.isResizing) {
             return;
         }
-        const movementX = (event.screenX - this.startX);
+        const movementX = (event instanceof MouseEvent) ? (event.screenX - this.startX) : (event.touches[0].screenX - this.startX);
         if (movementX === 0) {
             return;
         }
@@ -30568,7 +30580,7 @@ class OTableColumnResizerComponent {
     }
 }
 OTableColumnResizerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableColumnResizerComponent, deps: [{ token: forwardRef(() => OTableBase) }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-OTableColumnResizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableColumnResizerComponent, selector: "o-table-column-resizer", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMousedown($event)" }, properties: { "class.o-table-column-resizer": "true", "class.disabled": "isDisabled" } }, ngImport: i0, template: "<span class=\"resizer\" (click)=\"onClick($event)\"></span>", styles: [".o-table-column-resizer{display:inline-block;width:13px}.o-table-column-resizer:not(.disabled){cursor:col-resize}.o-table-column-resizer span{height:100%;width:1px;display:block;margin-left:auto;margin-right:auto}.o-table-column-resizer.disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableColumnResizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableColumnResizerComponent, selector: "o-table-column-resizer", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMousedown($event)", "touchstart": "onMousedown($event)", "document:mouseup": "onMouseup()", "document:touchend": "onMouseup()" }, properties: { "class.o-table-column-resizer": "true", "class.disabled": "isDisabled" } }, ngImport: i0, template: "<span class=\"resizer\" (click)=\"onClick($event)\"></span>", styles: [".o-table-column-resizer{display:inline-block;width:13px}.o-table-column-resizer:not(.disabled){cursor:col-resize}.o-table-column-resizer span{height:100%;width:1px;display:block;margin-left:auto;margin-right:auto}.o-table-column-resizer.disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -30587,6 +30599,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     }, propDecorators: { disabled: [], onMousedown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onMouseup: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }, {
+                type: HostListener,
+                args: ['document:touchend']
             }] } });
 
 const DEFAULT_INPUTS_O_TABLE_COLUMN_FILTER_ICON = [
@@ -31121,6 +31142,7 @@ class OTableComponent extends AbstractOServiceComponent {
         this.cd.detectChanges();
     }
     ngOnChanges(changes) {
+        super.ngOnChanges(changes);
         if (Util.isDefined(changes.autoAdjust) && changes.autoAdjust.currentValue !== changes.autoAdjust.previousValue) {
             this.autoAdjust = changes.autoAdjust.currentValue;
         }
@@ -36936,6 +36958,7 @@ class OTreeComponent extends AbstractOServiceComponent {
         event.stopPropagation();
         event.preventDefault();
         this.onNodeClick.emit(node);
+        this.selectedNode = node;
         if (this.detailMode !== Codes.DETAIL_MODE_NONE && !this.isRootNode(node)) {
             this.navigateToViewDetail(node);
         }
@@ -37192,9 +37215,12 @@ class OTreeComponent extends AbstractOServiceComponent {
             }
         }
     }
+    isSelectedNode(node) {
+        return this.selectedNode == node;
+    }
 }
 OTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: forwardRef(() => OFormComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTreeComponent, selector: "o-tree", inputs: { oattr: ["attr", "oattr"], service: "service", entity: "entity", columns: "columns", keys: "keys", parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertButton: ["insert-button", "insertButton"], refreshButton: ["refresh-button", "refreshButton"], deleteButton: ["delete-button", "deleteButton"], visibleColumns: ["visible-columns", "visibleColumns"], selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], separator: "separator", parentColumn: ["parent-column", "parentColumn"], sortColumn: ["sort-column", "sortColumn"], selectAllCheckboxVisible: ["select-all-checkbox-visible", "selectAllCheckboxVisible"], filterCaseSensitive: ["filter-case-sensitive", "filterCaseSensitive"], quickFilter: ["quick-filter", "quickFilter"], quickFilterPlaceholder: ["quick-filter-placeholder", "quickFilterPlaceholder"], quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], detailMode: ["detail-mode", "detailMode"], detailFormRoute: ["detail-form-route", "detailFormRoute"], showButtonsText: ["show-buttons-text", "showButtonsText"], rootTitle: ["root-title", "rootTitle"], recursive: "recursive", route: "route" }, outputs: { onNodeSelected: "onNodeSelected", onNodeExpanded: "onNodeExpanded", onNodeCollapsed: "onNodeCollapsed", onLoadNextLevel: "onLoadNextLevel", onDataLoaded: "onDataLoaded", onNodeClick: "onNodeClick" }, host: { properties: { "class.o-tree": "true" } }, providers: [OTreeDao], queries: [{ propertyName: "leafNodeTemplate", first: true, predicate: ["leafNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "parentNodeTemplate", first: true, predicate: ["parentNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "treeNode", first: true, predicate: i0.forwardRef(function () { return OTreeNodeComponent; }) }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event,node)\" matTreeNodeToggle matTreeNodePadding>\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding>\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i9$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i9$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i9$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i9$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i9$2.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: OTreeMenuComponent, selector: "o-tree-menu", inputs: ["select-all-checkbox", "select-all-checkbox-visible"], outputs: ["onSelectCheckboxChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+OTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTreeComponent, selector: "o-tree", inputs: { oattr: ["attr", "oattr"], service: "service", entity: "entity", columns: "columns", keys: "keys", parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertButton: ["insert-button", "insertButton"], refreshButton: ["refresh-button", "refreshButton"], deleteButton: ["delete-button", "deleteButton"], visibleColumns: ["visible-columns", "visibleColumns"], selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], separator: "separator", parentColumn: ["parent-column", "parentColumn"], sortColumn: ["sort-column", "sortColumn"], selectAllCheckboxVisible: ["select-all-checkbox-visible", "selectAllCheckboxVisible"], filterCaseSensitive: ["filter-case-sensitive", "filterCaseSensitive"], quickFilter: ["quick-filter", "quickFilter"], quickFilterPlaceholder: ["quick-filter-placeholder", "quickFilterPlaceholder"], quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], detailMode: ["detail-mode", "detailMode"], detailFormRoute: ["detail-form-route", "detailFormRoute"], showButtonsText: ["show-buttons-text", "showButtonsText"], rootTitle: ["root-title", "rootTitle"], recursive: "recursive", route: "route" }, outputs: { onNodeSelected: "onNodeSelected", onNodeExpanded: "onNodeExpanded", onNodeCollapsed: "onNodeCollapsed", onLoadNextLevel: "onLoadNextLevel", onDataLoaded: "onDataLoaded", onNodeClick: "onNodeClick" }, host: { properties: { "class.o-tree": "true" } }, providers: [OTreeDao], queries: [{ propertyName: "leafNodeTemplate", first: true, predicate: ["leafNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "parentNodeTemplate", first: true, predicate: ["parentNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "treeNode", first: true, predicate: i0.forwardRef(function () { return OTreeNodeComponent; }) }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event, node)\" matTreeNodeToggle matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OSearchInputComponent, selector: "o-search-input", inputs: ["placeholder", "label", "width", "float-label", "appearance", "columns", "filter-case-sensitive", "show-case-sensitive-checkbox", "show-menu"], outputs: ["onSearch"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$2.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: OTreeMenuComponent, selector: "o-tree-menu", inputs: ["select-all-checkbox", "select-all-checkbox-visible"], outputs: ["onSelectCheckboxChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -37223,7 +37249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Component,
             args: [{ selector: 'o-tree', inputs: DEFAULT_INPUTS_O_TREE, outputs: DEFAULT_OUTPUTS_O_TREE, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-tree]': 'true'
-                    }, providers: [OTreeDao], template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event,node)\" matTreeNodeToggle matTreeNodePadding>\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding>\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"] }]
+                    }, providers: [OTreeDao], template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event, node)\" matTreeNodeToggle matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: OFormComponent, decorators: [{
                         type: Optional
@@ -38016,7 +38042,7 @@ class OAppSidenavMenuItemComponent {
     }
 }
 OAppSidenavMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppSidenavMenuItemComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OAppSidenavMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: { menuItem: ["menu-item", "menuItem"], menuItemType: ["menu-item-type", "menuItemType"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], disabled: "disabled" }, outputs: { onClick: "onClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\">\n\n    <a mat-button *ngIf=\"!isUserInfoItem() && !isLocaleItem()\" (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menuitem-title\">{{ menuItem.name | oTranslate }}</span>\n      </div>\n    </a>\n\n    <a mat-button *ngIf=\"isLocaleItem()\" (click)=\"triggerClick($event)\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        {{ menuItem.name | oTranslate }}\n        <mat-icon *ngIf=\"isConfiguredLang()\" class=\"configured-lang\">check_circle</mat-icon>\n      </div>\n    </a>\n\n    <div *ngIf=\"isUserInfoItem()\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-user-info-menu-item\">\n      <div class=\"o-user-info-image\" fxFlexFill></div>\n      <div class=\"o-user-info-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlexFill>\n        <div class=\"o-user-info-name\">{{ menuItem.user }} </div>\n        <o-language-selector [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n      </div>\n    </div>\n  </li>\n</ng-container>\n\n<ng-container *ngIf=\"!sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\">\n    <a [matTooltip]=\"tooltip\" matTooltipClass=\"menuitem-tooltip\" matTooltipPosition=\"right\" mat-button (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n    </a>\n  </li>\n</ng-container>", styles: [".o-app-sidenav-menu-item .o-user-info-menu-item{cursor:default}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-image{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;height:200px!important}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-item{padding:0 8px 0 16px}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-name{text-transform:uppercase;font-weight:600}\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: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OLanguageSelectorComponent, selector: "o-language-selector", inputs: ["use-flag-icons"], outputs: ["onChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OAppSidenavMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: { menuItem: ["menu-item", "menuItem"], menuItemType: ["menu-item-type", "menuItemType"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], disabled: "disabled" }, outputs: { onClick: "onClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\">\n\n    <a mat-button *ngIf=\"!isUserInfoItem() && !isLocaleItem()\" (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menuitem-title\">{{ menuItem.name | oTranslate }}</span>\n      </div>\n    </a>\n\n    <a mat-button *ngIf=\"isLocaleItem()\" (click)=\"triggerClick($event)\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n        <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        {{ menuItem.name | oTranslate }}\n        <mat-icon *ngIf=\"isConfiguredLang()\" class=\"configured-lang\">check_circle</mat-icon>\n      </div>\n    </a>\n\n    <div *ngIf=\"isUserInfoItem()\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-user-info-menu-item\">\n      <div class=\"o-user-info-image\" fxFlexFill></div>\n      <div class=\"o-user-info-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlexFill>\n        <div class=\"o-user-info-name\">{{ menuItem.user }} </div>\n        <o-language-selector [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n      </div>\n    </div>\n  </li>\n</ng-container>\n\n<ng-container *ngIf=\"!sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\">\n    <a [matTooltip]=\"tooltip\" matTooltipClass=\"menuitem-tooltip\" matTooltipPosition=\"right\" mat-button (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n      <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n    </a>\n  </li>\n</ng-container>\n", styles: [".o-app-sidenav-menu-item .o-user-info-menu-item{cursor:default}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-image{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;height:200px!important}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-item{padding:0 8px 0 16px}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-name{text-transform:uppercase;font-weight:600}\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: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OLanguageSelectorComponent, selector: "o-language-selector", inputs: ["use-flag-icons"], outputs: ["onChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -38030,7 +38056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             args: [{ selector: 'o-app-sidenav-menu-item', inputs: DEFAULT_INPUTS_O_APP_SIDENAV_MENU_ITEM, outputs: DEFAULT_OUTPUTS_O_APP_SIDENAV_MENU_ITEM, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'getClass()',
                         '[attr.disabled]': 'disabled'
-                    }, template: "<ng-container *ngIf=\"sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\">\n\n    <a mat-button *ngIf=\"!isUserInfoItem() && !isLocaleItem()\" (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menuitem-title\">{{ menuItem.name | oTranslate }}</span>\n      </div>\n    </a>\n\n    <a mat-button *ngIf=\"isLocaleItem()\" (click)=\"triggerClick($event)\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        {{ menuItem.name | oTranslate }}\n        <mat-icon *ngIf=\"isConfiguredLang()\" class=\"configured-lang\">check_circle</mat-icon>\n      </div>\n    </a>\n\n    <div *ngIf=\"isUserInfoItem()\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-user-info-menu-item\">\n      <div class=\"o-user-info-image\" fxFlexFill></div>\n      <div class=\"o-user-info-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlexFill>\n        <div class=\"o-user-info-name\">{{ menuItem.user }} </div>\n        <o-language-selector [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n      </div>\n    </div>\n  </li>\n</ng-container>\n\n<ng-container *ngIf=\"!sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\">\n    <a [matTooltip]=\"tooltip\" matTooltipClass=\"menuitem-tooltip\" matTooltipPosition=\"right\" mat-button (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n    </a>\n  </li>\n</ng-container>", styles: [".o-app-sidenav-menu-item .o-user-info-menu-item{cursor:default}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-image{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;height:200px!important}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-item{padding:0 8px 0 16px}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-name{text-transform:uppercase;font-weight:600}\n"] }]
+                    }, template: "<ng-container *ngIf=\"sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\">\n\n    <a mat-button *ngIf=\"!isUserInfoItem() && !isLocaleItem()\" (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menuitem-title\">{{ menuItem.name | oTranslate }}</span>\n      </div>\n    </a>\n\n    <a mat-button *ngIf=\"isLocaleItem()\" (click)=\"triggerClick($event)\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n        <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        {{ menuItem.name | oTranslate }}\n        <mat-icon *ngIf=\"isConfiguredLang()\" class=\"configured-lang\">check_circle</mat-icon>\n      </div>\n    </a>\n\n    <div *ngIf=\"isUserInfoItem()\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-user-info-menu-item\">\n      <div class=\"o-user-info-image\" fxFlexFill></div>\n      <div class=\"o-user-info-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlexFill>\n        <div class=\"o-user-info-name\">{{ menuItem.user }} </div>\n        <o-language-selector [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n      </div>\n    </div>\n  </li>\n</ng-container>\n\n<ng-container *ngIf=\"!sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\">\n    <a [matTooltip]=\"tooltip\" matTooltipClass=\"menuitem-tooltip\" matTooltipPosition=\"right\" mat-button (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n      <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n    </a>\n  </li>\n</ng-container>\n", styles: [".o-app-sidenav-menu-item .o-user-info-menu-item{cursor:default}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-image{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;height:200px!important}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-item{padding:0 8px 0 16px}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-name{text-transform:uppercase;font-weight:600}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sidenavOpened: [], disabled: [] } });
 
 const DEFAULT_INPUTS_O_APP_SIDENAV_MENU_GROUP = [
@@ -38158,7 +38184,7 @@ class OAppSidenavMenuGroupComponent {
     }
 }
 OAppSidenavMenuGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppSidenavMenuGroupComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OAppSidenavMenuGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: { menuGroup: ["menu-group", "menuGroup"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], level: "level" }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\" [menu-item]=\"menuItem\"\n          [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n        </o-app-sidenav-menu-item>\n        <ng-template #menuGroup>\n          <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-group>\n        </ng-template>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], animations: [
+OAppSidenavMenuGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: { menuGroup: ["menu-group", "menuGroup"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], level: "level" }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\" [menu-item]=\"menuItem\"\n          [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n        </o-app-sidenav-menu-item>\n        <ng-template #menuGroup>\n          <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-group>\n        </ng-template>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], animations: [
         trigger('contentExpansion', [
             state('collapsed', style({ height: '0px' })),
             state('expanded', style({ height: '*' })),
@@ -38186,7 +38212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'getClass()',
                         '[attr.disabled]': 'disabled'
-                    }, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\" [menu-item]=\"menuItem\"\n          [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n        </o-app-sidenav-menu-item>\n        <ng-template #menuGroup>\n          <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-group>\n        </ng-template>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\" [menu-item]=\"menuItem\"\n          [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n        </o-app-sidenav-menu-item>\n        <ng-template #menuGroup>\n          <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-group>\n        </ng-template>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sidenavOpened: [], level: [] } });
 
 const DEFAULT_INPUTS_O_APP_SIDENAV = [
@@ -38369,7 +38395,7 @@ class OAppSidenavComponent {
 OAppSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppSidenavComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$2.MediaObserver }], target: i0.ɵɵFactoryTarget.Component });
 OAppSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavComponent, selector: "o-app-sidenav", inputs: { opened: "opened", showUserInfo: ["show-user-info", "showUserInfo"], showToggleButton: ["show-toggle-button", "showToggleButton"], openedSidenavImg: ["opened-sidenav-image", "openedSidenavImg"], closedSidenavImg: ["closed-sidenav-image", "closedSidenavImg"], layoutMode: ["layout-mode", "layoutMode"], sidenavMode: ["sidenav-mode", "sidenavMode"] }, outputs: { onSidenavOpenedChange: "onSidenavOpenedChange", onSidenavOpenedStart: "onSidenavOpenedStart", onSidenavClosedStart: "onSidenavClosedStart", onSidenavToggle: "onSidenavToggle", afterSidenavToggle: "afterSidenavToggle" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.o-app-sidenav": "true" } }, providers: [
         { provide: OAppSidenavBase, useExisting: forwardRef(() => OAppSidenavComponent) }
-    ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true }], ngImport: i0, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group'\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group'\" (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavImageComponent, selector: "o-app-sidenav-image", inputs: ["opened-src", "closed-src"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true }], ngImport: i0, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group'\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group'\" (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavImageComponent, selector: "o-app-sidenav-image", inputs: ["opened-src", "closed-src"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -38380,7 +38406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         '[class.o-app-sidenav]': 'true'
                     }, providers: [
                         { provide: OAppSidenavBase, useExisting: forwardRef(() => OAppSidenavComponent) }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group'\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group'\" (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group'\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group'\" (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"] }]
         }], 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]
@@ -38586,7 +38612,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 const DEFAULT_INPUTS_O_MENU_LAYOUT = [
-    'parentMenuId : parent-menu-id'
+    'parentMenuId : parent-menu-id',
+    'excludeMenusId : exclude-menus-id'
 ];
 const DEFAULT_OUTPUTS_O_MENU_LAYOUT = [];
 class OCardMenuLayoutComponent {
@@ -38596,6 +38623,7 @@ class OCardMenuLayoutComponent {
         this.translateService = this.injector.get(OTranslateService);
         this.appMenuService = this.injector.get(AppMenuService);
         this.menuRoots = this.appMenuService.getMenuRoots();
+        this.permissionsService = this.injector.get(PermissionsService);
         this.translateServiceSubscription = this.translateService.onLanguageChanged.subscribe(() => {
             this.cd.detectChanges();
         });
@@ -38614,7 +38642,9 @@ class OCardMenuLayoutComponent {
             cardItemsAux = this.menuRoots.filter(item => !this.appMenuService.isMenuGroup(item));
         }
         else {
-            cardItemsAux = this.getItemsFilteredByParentId(this.menuRoots);
+            this.parentMenuIds = (this.parentMenuId || '').split(';').map(id => id.trim());
+            this.excludeIds = (this.excludeMenusId || '').split(';').map(id => id.trim());
+            cardItemsAux = this.getItemsFilteredByParentId(this.menuRoots, this.parentMenuIds);
         }
         this.cardItems = cardItemsAux;
     }
@@ -38625,24 +38655,35 @@ class OCardMenuLayoutComponent {
         this.cardItemsArray = val;
         this.cd.detectChanges();
     }
-    getItemsFilteredByParentId(array) {
-        let result;
+    getItemsFilteredByParentId(array, parentMenuIds) {
+        let result = [];
         const groups = array.filter(item => this.appMenuService.isMenuGroup(item));
-        for (let i = 0, len = groups.length; i < len; i++) {
-            const menuGroup = groups[i];
-            if (menuGroup.id === this.parentMenuId) {
-                result = menuGroup.items;
-                break;
-            }
-            else {
-                result = this.getItemsFilteredByParentId(menuGroup.items);
+        parentMenuIds.forEach(parentMenuId => {
+            for (let i = 0, len = groups.length; i < len; i++) {
+                const menuGroup = groups[i];
+                if (menuGroup.id === parentMenuId) {
+                    let permissions = this.permissionsService.getMenuPermissions(parentMenuId);
+                    menuGroup.items.forEach(item => {
+                        let hidden = (permissions === null || permissions === void 0 ? void 0 : permissions.visible) === false || this.excludeIds.includes(item.id);
+                        item['show-in-card-menu'] = !hidden;
+                    });
+                    result = result.concat(menuGroup.items);
+                    break;
+                }
+                else {
+                    const childResult = this.getItemsFilteredByParentId(menuGroup.items, [parentMenuId]);
+                    if (childResult.length) {
+                        result = result.concat(childResult);
+                        break;
+                    }
+                }
             }
-        }
+        });
         return result;
     }
 }
 OCardMenuLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OCardMenuLayoutComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OCardMenuLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OCardMenuLayoutComponent, selector: "o-card-menu-layout", inputs: { parentMenuId: ["parent-menu-id", "parentMenuId"] }, host: { properties: { "class.o-menu-layout": "true" } }, ngImport: i0, template: "<div fxLayout=\"row wrap\" class=\"scrolling\" fxLayout.lt-md=\"column\" fxLayoutAlign=\"space-around center\" fxLayoutGap=\"8px\">\n  <ng-container *ngFor=\"let item of cardItems\">\n    <o-card-menu-item *ngIf=\"item['show-in-card-menu'] !== false\" button-text=\"CARD_MENU_LAYOUT.BUTTON_TEXT\" [route]=\"item.route\" [title]=\"item.name\"\n      [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [image]=\"item.image\" [detail-component]=\"item.component\"\n      [detail-component-inputs]=\"item['component-inputs']\" [ngClass]=\"item.class\">\n    </o-card-menu-item>\n  </ng-container>\n  <ng-content select=\"o-card-menu-item\"></ng-content>\n</div>\n", styles: [".o-menu-layout{position:relative;width:100%}.o-menu-layout .scrolling{width:100%;min-width:100%;min-height:100%;overflow-y:auto}.o-menu-layout .o-card-menu-item{height:45%;margin-bottom:12px;max-width:300px;min-width:300px}.o-menu-layout .o-card-menu-item.compact{height:30%;max-height:250px}\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: "component", type: OCardMenuItemComponent, selector: "o-card-menu-item", inputs: ["title", "image", "icon", "tooltip", "button-text", "disabled-button", "main-container-layout", "secondary-container-layout", "route", "detail-component", "detail-component-inputs", "action"] }, { 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: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OCardMenuLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OCardMenuLayoutComponent, selector: "o-card-menu-layout", inputs: { parentMenuId: ["parent-menu-id", "parentMenuId"], excludeMenusId: ["exclude-menus-id", "excludeMenusId"] }, host: { properties: { "class.o-menu-layout": "true" } }, ngImport: i0, template: "<div fxLayout=\"row wrap\" class=\"scrolling\" fxLayout.lt-md=\"column\" fxLayoutAlign=\"space-around center\" fxLayoutGap=\"8px\">\n  <ng-container *ngFor=\"let item of cardItems\">\n    <o-card-menu-item *ngIf=\"item['show-in-card-menu'] !== false\" button-text=\"CARD_MENU_LAYOUT.BUTTON_TEXT\" [route]=\"item.route\" [title]=\"item.name\"\n      [tooltip]=\"item.tooltip\" [icon]=\"item.icon\" [image]=\"item.image\" [detail-component]=\"item.component\"\n      [detail-component-inputs]=\"item['component-inputs']\" [ngClass]=\"item.class\">\n    </o-card-menu-item>\n  </ng-container>\n  <ng-content select=\"o-card-menu-item\"></ng-content>\n</div>\n", styles: [".o-menu-layout{position:relative;width:100%}.o-menu-layout .scrolling{width:100%;min-width:100%;min-height:100%;overflow-y:auto}.o-menu-layout .o-card-menu-item{height:45%;margin-bottom:12px;max-width:300px;min-width:300px}.o-menu-layout .o-card-menu-item.compact{height:30%;max-height:250px}\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: "component", type: OCardMenuItemComponent, selector: "o-card-menu-item", inputs: ["title", "image", "icon", "tooltip", "button-text", "disabled-button", "main-container-layout", "secondary-container-layout", "route", "detail-component", "detail-component-inputs", "action"] }, { 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: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OCardMenuLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-card-menu-layout', inputs: DEFAULT_INPUTS_O_MENU_LAYOUT, outputs: DEFAULT_OUTPUTS_O_MENU_LAYOUT, encapsulation: ViewEncapsulation.None, host: {