ontimize-web-ngx 15.5.3 → 15.5.4

package/fesm2020/ontimize-web-ngx.mjs

@@ -304,6 +304,8 @@ Codes.VISIBLE_EXPORT_BUTTONS = ['xlsx', 'pdf', 'html'];
 Codes.VISIBLE_EXPORT_BUTTONS3X = ['xlsx', 'pdf', 'csv'];
 Codes.DEFAULT_CHANGE_EVENT = 'onValueChange';
 Codes.TYPES_DATE_GROUPS = ["YEAR", "MONTH", "YEAR_MONTH", "YEAR_MONTH_DAY"];
+Codes.TOOLTIP_DISPLAY_MODE = ['always', 'never', 'only-collapsed', 'only-expanded'];
+Codes.TOOLTIP_DISPLAY_COLLAPSED = 'only-collapsed';
 
 class Util {
     static isObject(val) {
@@ -33240,12 +33242,20 @@ class OTableComponent extends AbstractOServiceComponent {
             this.tableRowExpandable.onCollapsed.emit(eventTableRowExpandableChange);
         }
         else {
-            this.portalHost[rowIndex] = new DomPortalOutlet(this.elRef.nativeElement.querySelector('.' + this.getExpandedRowContainerClass(rowIndex)), null, this.appRef, this.injector);
+            const containerElement = this.elRef.nativeElement.querySelector('.' + this.getExpandedRowContainerClass(rowIndex));
+            this.portalHost[rowIndex] = new DomPortalOutlet(containerElement, null, this.appRef, this.injector);
             const templatePortal = new TemplatePortal(this.tableRowExpandable.templateRef, this._viewContainerRef, { $implicit: item });
             this.portalHost[rowIndex].attachTemplatePortal(templatePortal);
             this.tableRowExpandable.onExpanded.emit(eventTableRowExpandableChange);
         }
     }
+    destroyAllPortalHosts() {
+        this.portalHost.forEach(host => {
+            if (host.hasAttached()) {
+                host.detach();
+            }
+        });
+    }
     toggleRowExpandableByRowIndex(rowIndex, event) {
         const item = this.getValue()[rowIndex];
         this.toggleRowExpandable(item, event);
@@ -33283,6 +33293,7 @@ class OTableComponent extends AbstractOServiceComponent {
         this.pendingQuery = false;
         this.pendingQueryFilter = undefined;
         this.queryCellRenderers().subscribe(() => {
+            this.destroyAllPortalHosts();
             super.queryData(filter, ovrrArgs);
         });
     }
@@ -38751,13 +38762,26 @@ class OAppSidenavMenuItemComponent {
         this.parsePermissions();
         this.active = this.appMenuService.isItemActive(this.menuItem);
     }
+    get shouldShowTooltip() {
+        switch (this.oAppLayoutComponent.tooltipDisplayMode) {
+            case 'always':
+                return true;
+            case 'never':
+                return false;
+            case 'only-collapsed':
+                return !this.sidenavOpened;
+            case 'only-expanded':
+                return this.sidenavOpened;
+            default:
+                return false;
+        }
+    }
     ngAfterViewInit() {
         if (this.isUserInfoItem() && this.sidenav) {
             this.setUserInfoImage();
             this.appSidenavToggleSubscription.add(this.sidenav.onSidenavOpenedChange.subscribe(() => {
                 if (this.sidenav.sidenav.opened) {
                     this.setUserInfoImage();
-                    this.setUserInfoImage();
                 }
             }));
             this.userInfoSubscription = this.oUserInfoService.getUserInfoObservable().subscribe(res => {
@@ -38902,7 +38926,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()\" [id]=\"menuItem.id\">\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: i3.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  <ng-container *ngIf=\"shouldShowTooltip; else noTooltipOpened\">\n    <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\"\n      matTooltipPosition=\"right\" matTooltipShowDelay=\"500\" [class.o-user-info]=\"isUserInfoItem()\" [id]=\"menuItem.id\">\n      <ng-container *ngTemplateOutlet=\"contentOpened\"></ng-container>\n    </li>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\">\n    <ng-container *ngIf=\"shouldShowTooltip; else noTooltipClosed\">\n\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    </ng-container>\n    <ng-template #noTooltipClosed>\n      <a mat-button (click)=\"triggerClick($event)\" [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    </ng-template>\n  </li>\n</ng-container>\n\n<ng-template #noTooltipOpened>\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\" [id]=\"menuItem.id\">\n    <ng-container *ngTemplateOutlet=\"contentOpened\"></ng-container>\n  </li>\n</ng-template>\n\n<ng-template #contentOpened>\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\">{{\n        menuItem.name | oTranslate\n        }}</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</ng-template>\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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i3.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)
@@ -38916,7 +38940,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()\" [id]=\"menuItem.id\">\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"] }]
+                    }, template: "<ng-container *ngIf=\"sidenavOpened\">\n  <ng-container *ngIf=\"shouldShowTooltip; else noTooltipOpened\">\n    <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\"\n      matTooltipPosition=\"right\" matTooltipShowDelay=\"500\" [class.o-user-info]=\"isUserInfoItem()\" [id]=\"menuItem.id\">\n      <ng-container *ngTemplateOutlet=\"contentOpened\"></ng-container>\n    </li>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\">\n    <ng-container *ngIf=\"shouldShowTooltip; else noTooltipClosed\">\n\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    </ng-container>\n    <ng-template #noTooltipClosed>\n      <a mat-button (click)=\"triggerClick($event)\" [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    </ng-template>\n  </li>\n</ng-container>\n\n<ng-template #noTooltipOpened>\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\" [id]=\"menuItem.id\">\n    <ng-container *ngTemplateOutlet=\"contentOpened\"></ng-container>\n  </li>\n</ng-template>\n\n<ng-template #contentOpened>\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\">{{\n        menuItem.name | oTranslate\n        }}</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</ng-template>\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 = [
@@ -38942,6 +38966,7 @@ class OAppSidenavMenuGroupComponent {
         this.permissionsService = this.injector.get(PermissionsService);
         this.sidenav = this.injector.get(OAppSidenavBase);
         this.router = this.injector.get(Router);
+        this.oAppLayoutComponent = this.injector.get(OAppLayoutBase);
         this.routerSubscription = this.router.events.subscribe((event) => {
             if (event instanceof NavigationEnd && this.appMenuService.isRouteItem(this.menuGroup)) {
                 this.active = this.appMenuService.isItemActive(this.menuGroup);
@@ -38952,6 +38977,20 @@ class OAppSidenavMenuGroupComponent {
     ngOnInit() {
         this.parsePermissions();
     }
+    get shouldShowTooltip() {
+        switch (this.oAppLayoutComponent.tooltipDisplayMode) {
+            case 'always':
+                return true;
+            case 'never':
+                return false;
+            case 'only-collapsed':
+                return !this.sidenavOpened;
+            case 'only-expanded':
+                return this.sidenavOpened;
+            default:
+                return false;
+        }
+    }
     ngAfterViewInit() {
         if (this.menuGroup.id === 'user-info' && this.sidenav) {
             const self = this;
@@ -39044,7 +39083,7 @@ class OAppSidenavMenuGroupComponent {
     }
 }
 OAppSidenavMenuGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppSidenavMenuGroupComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OAppSidenavMenuGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: { menuGroup: ["menu-group", "menuGroup"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], level: "level" }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <ng-container *ngIf=\"appMenuService.isVisible(menuItem)\">\n          <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\"\n            [menu-item]=\"menuItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-item>\n          <ng-template #menuGroup>\n            <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n              *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n            </o-app-sidenav-menu-group>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i3.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  <ng-container *ngIf=\"shouldShowTooltip; else noTooltip\">\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\" [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\"\n      matTooltipPosition=\"right\" [matTooltipShowDelay]=\"sidenavOpened?500:0\">\n      <ng-container *ngTemplateOutlet=\"contentButton\"></ng-container>\n    </a>\n  </ng-container>\n\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <ng-container *ngIf=\"appMenuService.isVisible(menuItem)\">\n          <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\"\n            [menu-item]=\"menuItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-item>\n          <ng-template #menuGroup>\n            <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n              *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n            </o-app-sidenav-menu-group>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<ng-template #noTooltip>\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    <ng-container *ngTemplateOutlet=\"contentButton\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #contentButton>\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 [id]=\"'arrow_icon_' + menuGroup.id\" class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"\n        (click)=\"toggle($event)\"\n        (keydown)=\"toggle($event)\"></mat-icon>\n      </ng-container>\n      <ng-template #arrowMenuGroupTemplate>\n        <mat-icon [id]=\"'arrow_icon_' + menuGroup.id\" 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 *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon> <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n    </ng-container>\n  </div>\n</ng-template>\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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i3.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: '*' })),
@@ -39072,7 +39111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'getClass()',
                         '[attr.disabled]': 'disabled'
-                    }, template: "<ng-container *ngIf=\"!hidden\">\n  <a mat-button mat-button class=\"o-app-sidenav-item o-app-sidenav-menugroup\" [class.opened]=\"menuGroup.opened\" (click)=\"onClick()\"\n    [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill>\n      <ng-container *ngIf=\"sidenavOpened\">\n        <mat-icon *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menugroup-title\">{{ menuGroup.name | oTranslate }}</span>\n        <span class=\"fill-remaining\"></span>\n        <ng-container *ngIf=\"appMenuService.isMenuGroupRoute(menuGroup) && menuGroup.opened; else arrowMenuGroupTemplate\">\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\" (click)=\"toggle($event)\"></mat-icon>\n        </ng-container>\n        <ng-template #arrowMenuGroupTemplate>\n          <mat-icon class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"></mat-icon>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!sidenavOpened\">\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.svgIcon\"\n          [svgIcon]=\"menuGroup.svgIcon\"></mat-icon>\n        <mat-icon [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\" matTooltipPosition=\"right\" *ngIf=\"menuGroup.icon\">{{\n          menuGroup.icon }}</mat-icon>\n      </ng-container>\n    </div>\n  </a>\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <ng-container *ngIf=\"appMenuService.isVisible(menuItem)\">\n          <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\"\n            [menu-item]=\"menuItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-item>\n          <ng-template #menuGroup>\n            <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n              *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n            </o-app-sidenav-menu-group>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n", styles: [".o-app-sidenav-menu-group .o-app-sidenav-menugroup.mat-mdc-button{min-width:0}.o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-menugroup{cursor:default}.o-app-sidenav-menu-group .mat-mdc-tooltip.menugroup-tooltip{margin-left:28px}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!hidden\">\n  <ng-container *ngIf=\"shouldShowTooltip; else noTooltip\">\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\" [matTooltip]=\"tooltip\" matTooltipClass=\"menugroup-tooltip\"\n      matTooltipPosition=\"right\" [matTooltipShowDelay]=\"sidenavOpened?500:0\">\n      <ng-container *ngTemplateOutlet=\"contentButton\"></ng-container>\n    </a>\n  </ng-container>\n\n\n  <div class=\"o-app-sidenav-menugroup-items-container\">\n    <ul [@contentExpansion]=\"contentExpansion\" class=\"o-app-sidenav-menugroup-ul\">\n      <ng-container *ngFor=\"let menuItem of menuGroup.items\">\n        <ng-container *ngIf=\"appMenuService.isVisible(menuItem)\">\n          <o-app-sidenav-menu-item [sidenav-opened]=\"sidenavOpened\" *ngIf=\"!menuItem.items; else menuGroup\" [disabled]=\"disabled\"\n            [menu-item]=\"menuItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuItem)\" (onClick)=\"onMenuItemClick($event)\">\n          </o-app-sidenav-menu-item>\n          <ng-template #menuGroup>\n            <o-app-sidenav-menu-group [menu-group]=\"menuItem\" [sidenav-opened]=\"sidenavOpened\" [level]=\"level + 1\"\n              *ngIf=\"appMenuService.getMenuItemType(menuItem) === 'group'\" (onItemClick)=\"onMenuItemClick($event)\">\n            </o-app-sidenav-menu-group>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<ng-template #noTooltip>\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    <ng-container *ngTemplateOutlet=\"contentButton\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #contentButton>\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 [id]=\"'arrow_icon_' + menuGroup.id\" class=\"o-app-sidenav-menugroup-arrow\" svgIcon=\"ontimize:keyboard_arrow_right\"\n        (click)=\"toggle($event)\"\n        (keydown)=\"toggle($event)\"></mat-icon>\n      </ng-container>\n      <ng-template #arrowMenuGroupTemplate>\n        <mat-icon [id]=\"'arrow_icon_' + menuGroup.id\" 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 *ngIf=\"menuGroup.svgIcon\" [svgIcon]=\"menuGroup.svgIcon\"></mat-icon> <mat-icon *ngIf=\"menuGroup.icon\">{{ menuGroup.icon }}</mat-icon>\n    </ng-container>\n  </div>\n</ng-template>\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: [] } });
 
 class OAppSidenavComponentStateClass extends DefaultComponentStateClass {
@@ -39111,7 +39150,8 @@ const DEFAULT_INPUTS_O_APP_SIDENAV = [
     'closedSidenavImg: closed-sidenav-image',
     'layoutMode: layout-mode',
     'sidenavMode: sidenav-mode',
-    'storeState: store-state'
+    'storeState: store-state',
+    'showEllipsisMenu: show-ellipsis-menu'
 ];
 const DEFAULT_OUTPUTS_O_APP_SIDENAV = [
     'onSidenavOpenedChange',
@@ -39131,6 +39171,7 @@ class OAppSidenavComponent extends OAppSidenavComponentStateService {
         this.menuRootArray = [];
         this._layoutMode = Codes.APP_LAYOUT_MODE_DESKTOP;
         this.opened = true;
+        this.showEllipsisMenu = false;
         this._showUserInfo = true;
         this._showToggleButton = true;
         this.onSidenavOpenedChange = new EventEmitter();
@@ -39324,9 +39365,9 @@ class OAppSidenavComponent extends OAppSidenavComponentStateService {
     }
 }
 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$1.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"], storeState: ["store-state", "storeState"] }, outputs: { onSidenavOpenedChange: "onSidenavOpenedChange", onSidenavOpenedStart: "onSidenavOpenedStart", onSidenavClosedStart: "onSidenavClosedStart", onSidenavToggle: "onSidenavToggle", afterSidenavToggle: "afterSidenavToggle" }, host: { listeners: { "window:beforeunload": "beforeunloadHandler()", "window:resize": "onResize()" }, properties: { "class.o-app-sidenav": "true" } }, providers: [
+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"], storeState: ["store-state", "storeState"], showEllipsisMenu: ["show-ellipsis-menu", "showEllipsisMenu"] }, outputs: { onSidenavOpenedChange: "onSidenavOpenedChange", onSidenavOpenedStart: "onSidenavOpenedStart", onSidenavClosedStart: "onSidenavClosedStart", onSidenavToggle: "onSidenavToggle", afterSidenavToggle: "afterSidenavToggle" }, host: { listeners: { "window:beforeunload": "beforeunloadHandler()", "window:resize": "onResize()" }, properties: { "class.o-app-sidenav": "true" } }, providers: [
         { provide: OAppSidenavBase, useExisting: forwardRef(() => OAppSidenavComponent) }
-    ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"o-app-sidenav-container\" [class.opened]=\"sidenav.opened\"\n  [class.o-app-sidenav-mode-desktop]=\"(layoutMode || 'desktop') === 'desktop'\"\n  [class.o-app-sidenav-mode-mobile]=\"(layoutMode || 'desktop') !== 'desktop'\">\n\n  <mat-sidenav #sidenav class=\"o-app-sidenav-sidenav o-scroll\" [opened]=\"isSidenavOpened()\"\n    [mode]=\"(sidenavMode || ((layoutMode || 'desktop') === 'desktop' ? 'side' : 'over'))\" [class.mat-drawer-opened]=\"sidenav.opened\"\n    [class.mat-drawer-closed]=\"!sidenav.opened\" fxLayoutAlign=\"start stretch\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxFlex fxLayout=\"column\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group' && appMenuService.isVisible(menuRootItem)\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group' && appMenuService.isVisible(menuRootItem)\"\n            (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: OAppSidenavMenuGroupComponent, selector: "o-app-sidenav-menu-group", inputs: ["menu-group", "sidenav-opened", "level"], outputs: ["onItemClick"] }, { kind: "component", type: OAppSidenavImageComponent, selector: "o-app-sidenav-image", inputs: ["opened-src", "closed-src"] }, { kind: "component", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: ["menu-item", "menu-item-type", "sidenav-opened", "disabled"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true }], usesInheritance: 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\" [class.ellipsis-menu-items]=\"showEllipsisMenu\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxLayout=\"column\" class=\"sidenav-wrapper\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon id=\"sidenav-menu\" class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group' && appMenuService.isVisible(menuRootItem)\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group' && appMenuService.isVisible(menuRootItem)\"\n            (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n    </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%;display:flex}.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.ellipsis-menu-items,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.ellipsis-menu-items .mat-drawer-inner-container{display:block}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.ellipsis-menu-items .sidenav-wrapper{height:100%;width:100%;padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{display:flex}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-wrapper{flex:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .o-app-sidenav-content-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav 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 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 ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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: "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)
@@ -39337,7 +39378,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' && appMenuService.isVisible(menuRootItem)\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group' && appMenuService.isVisible(menuRootItem)\"\n            (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup{transition:padding .5s 0s}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup .o-app-sidenav-menugroup-arrow{transition:.5s transform cubic-bezier(.25,.8,.25,1)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup.opened .o-app-sidenav-menugroup-arrow{transform:rotate(90deg)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup-title,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:28px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-2 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-right:4px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-3 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-4 a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menu-group-level-5 a{padding-left:52px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menugroup mat-icon:not(.o-app-sidenav-menugroup-arrow),.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav:not(.mat-drawer-closed) .o-app-sidenav-menuitem mat-icon:not(.o-app-sidenav-menugroup-arrow){margin-right:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closing{transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed{text-align:center}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item:not(.o-user-info){cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:focus,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-item.o-user-info:hover{color:inherit}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-group:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-menu-item:not([disabled=true]) a.o-app-sidenav-viewer-sidenav-item-selected{padding:0 8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed nav{width:48px;min-width:48px;margin-left:auto}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container{padding:0;text-align:end;max-height:36px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed .o-app-sidenav-image .o-app-sidenav-image-container .o-app-sidenav-image{max-height:36px;margin-right:8px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a{border-radius:0;box-sizing:border-box;display:block;line-height:48px;height:auto;font-size:14px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container nav a>.mat-icon{vertical-align:middle;height:24px;width:24px;font-size:24px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a{font-size:14px;line-height:48px;height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-1 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a{font-size:12px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a{font-size:11px;line-height:40px;height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-mdc-button-touch-target,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-mdc-button-touch-target{height:40px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-group a .mat-icon,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menu-group-level-2 a+.o-app-sidenav-menugroup-items-container .o-app-sidenav-menu-item a .mat-icon{font-size:20px;height:20px;width:20px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .o-app-sidenav-menugroup-arrow{display:flex}\n"] }]
+                    ], 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\" [class.ellipsis-menu-items]=\"showEllipsisMenu\" (openedChange)=\"sidenavOpenedChange()\"\n    (closedStart)=\"sidenavClosedStart()\" (openedStart)=\"sidenavOpenedStart()\">\n    <div fxLayout=\"column\" class=\"sidenav-wrapper\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"sidenav-toggle-container\" *ngIf=\"isDesktopMode()\">\n        <mat-icon id=\"sidenav-menu\" class=\"sidenav-toggle\" (click)=\"toggleSidenav()\" svgIcon=\"ontimize:menu\">menu</mat-icon>\n      </div>\n\n      <o-app-sidenav-image [opened-src]=\"openedSidenavImg\" [closed-src]=\"closedSidenavImg\"> </o-app-sidenav-image>\n      <ng-content select=\"o-app-layout-sidenav-projection-start\"></ng-content>\n      <div class=\"navMenu\">\n        <nav *ngFor=\"let menuRootItem of menuRootArray\">\n\n          <ul *ngIf=\"appMenuService.getMenuItemType(menuRootItem) !== 'group' && appMenuService.isVisible(menuRootItem)\">\n            <o-app-sidenav-menu-item [menu-item]=\"menuRootItem\" [menu-item-type]=\"appMenuService.getMenuItemType(menuRootItem)\"\n              [sidenav-opened]=\"sidenav.opened\" (onClick)=\"onMenuItemClick()\">\n            </o-app-sidenav-menu-item>\n          </ul>\n\n          <o-app-sidenav-menu-group [menu-group]=\"menuRootItem\" [sidenav-opened]=\"sidenav.opened\" level=\"1\"\n            *ngIf=\"appMenuService.getMenuItemType(menuRootItem) === 'group' && appMenuService.isVisible(menuRootItem)\"\n            (onItemClick)=\"onMenuItemClick()\">\n          </o-app-sidenav-menu-group>\n\n        </nav>\n      </div>\n      <div class=\"layout-sidenav-projection-end\">\n        <ng-content select=\"o-app-layout-sidenav-projection-end\"></ng-content>\n    </div>\n    </div>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"o-app-sidenav-content\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".o-app-sidenav.header-layout .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 48px 6px #0000003d}.o-app-sidenav .navMenu{flex:1;display:flex;flex-direction:column;overflow:auto}@-moz-document url-prefix(){.o-app-sidenav .navMenu{height:100%}}.o-app-sidenav .o-app-sidenav-menu-group a,.o-app-sidenav .o-app-sidenav-menu-item a{margin-left:8px}.o-app-sidenav .o-app-sidenav-menu-group a .mat-icon svg,.o-app-sidenav .o-app-sidenav-menu-item a .mat-icon svg{display:flex}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .mat-mdc-button-persistent-ripple,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-button-focus-overlay,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .mat-mdc-button-persistent-ripple{display:none}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] .o-app-sidenav-item,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] .o-app-sidenav-item{opacity:.5}.o-app-sidenav .o-app-sidenav-menu-group[disabled=true] a,.o-app-sidenav .o-app-sidenav-menu-item[disabled=true] a{cursor:initial}.o-app-sidenav .o-app-sidenav-menugroup{transition:background-color .5s}.o-app-sidenav .o-app-sidenav-menugroup-items-container{overflow:hidden}.o-app-sidenav .o-app-sidenav-container{width:100%;height:100%}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-sidenav.mat-drawer-closed{visibility:visible!important;transform:translate3d(-191px,0,0)}.o-app-sidenav .o-app-sidenav-container.o-app-sidenav-mode-desktop:not(.opened) .o-app-sidenav-content.mat-drawer-content{margin-right:48px!important;transform:translate3d(48px,0,0)!important}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content{position:absolute;right:0;left:0;min-height:100%;display:flex;flex-direction:column}.o-app-sidenav .o-app-sidenav-container .o-app-sidenav-content router-outlet+*{flex-grow:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav{box-shadow:3px 0 6px #0000003d;width:240px;bottom:0;overflow:auto;height:100%;display:flex}.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.ellipsis-menu-items,.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.ellipsis-menu-items .mat-drawer-inner-container{display:block}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav.ellipsis-menu-items .sidenav-wrapper{height:100%;width:100%;padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container{display:flex}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .mat-drawer-inner-container .sidenav-wrapper{flex:1}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .o-app-sidenav-content-container{padding-bottom:16px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .sidenav-toggle-container{height:48px}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav 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 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 ul{list-style-type:none;margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav ul li{margin:0;padding:0}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .sidenav-toggle{padding:4px 12px 8px;cursor:pointer}.o-app-sidenav .o-app-sidenav-container .mat-drawer.o-app-sidenav-sidenav .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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$1.MediaObserver }]; }, propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: [MatSidenav]
@@ -39415,7 +39456,9 @@ const DEFAULT_INPUTS_O_APP_LAYOUT = [
     'headerHeight: header-height',
     'showTitle: show-title',
     'staticTitle: static-title',
-    'showStaticTitle: show-static-title'
+    'showStaticTitle: show-static-title',
+    'tooltipDisplayMode: tooltip-display-mode',
+    'showEllipsisMenu: show-ellipsis-menu'
 ];
 const DEFAULT_OUTPUTS_O_APP_LAYOUT = [
     'beforeOpenSidenav',
@@ -39432,11 +39475,13 @@ class OAppLayoutComponent {
         this._showHeader = true;
         this.showTitle = false;
         this.showStaticTitle = false;
+        this.showEllipsisMenu = false;
         this.headerHeight = Codes.DEFAULT_ROW_HEIGHT;
         this.beforeOpenSidenav = new EventEmitter();
         this.afterOpenSidenav = new EventEmitter();
         this.beforeCloseSidenav = new EventEmitter();
         this.afterCloseSidenav = new EventEmitter();
+        this._tooltipDisplayMode = Codes.TOOLTIP_DISPLAY_COLLAPSED;
     }
     get showHeader() {
         return this._showHeader;
@@ -39471,6 +39516,15 @@ class OAppLayoutComponent {
             console.error('Invalid `o-app-layout` sidenav-mode (' + val + ')');
         }
     }
+    get tooltipDisplayMode() {
+        return this._tooltipDisplayMode;
+    }
+    set tooltipDisplayMode(val) {
+        const m = Codes.TOOLTIP_DISPLAY_MODE.find(e => e.toLocaleLowerCase() === val);
+        if (Util.isDefined(m)) {
+            this._tooltipDisplayMode = m;
+        }
+    }
     sidenavToggle(opened) {
         opened ? this.beforeOpenSidenav.emit() : this.beforeCloseSidenav.emit();
     }
@@ -39484,9 +39538,9 @@ class OAppLayoutComponent {
     }
 }
 OAppLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OAppLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppLayoutComponent, selector: "o-app-layout", inputs: { mode: "mode", sidenavMode: ["sidenav-mode", "sidenavMode"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], _showHeader: ["show-header", "_showHeader"], showUserInfo: ["show-user-info", "showUserInfo"], showLanguageSelector: ["show-language-selector", "showLanguageSelector"], useFlagIcons: ["use-flag-icons", "useFlagIcons"], openedSidenavImg: ["opened-sidenav-image", "openedSidenavImg"], closedSidenavImg: ["closed-sidenav-image", "closedSidenavImg"], headerColor: ["header-color", "headerColor"], headerHeight: ["header-height", "headerHeight"], showTitle: ["show-title", "showTitle"], staticTitle: ["static-title", "staticTitle"], showStaticTitle: ["show-static-title", "showStaticTitle"] }, outputs: { beforeOpenSidenav: "beforeOpenSidenav", afterOpenSidenav: "afterOpenSidenav", beforeCloseSidenav: "beforeCloseSidenav", afterCloseSidenav: "afterCloseSidenav" }, providers: [
+OAppLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppLayoutComponent, selector: "o-app-layout", inputs: { mode: "mode", sidenavMode: ["sidenav-mode", "sidenavMode"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], _showHeader: ["show-header", "_showHeader"], showUserInfo: ["show-user-info", "showUserInfo"], showLanguageSelector: ["show-language-selector", "showLanguageSelector"], useFlagIcons: ["use-flag-icons", "useFlagIcons"], openedSidenavImg: ["opened-sidenav-image", "openedSidenavImg"], closedSidenavImg: ["closed-sidenav-image", "closedSidenavImg"], headerColor: ["header-color", "headerColor"], headerHeight: ["header-height", "headerHeight"], showTitle: ["show-title", "showTitle"], staticTitle: ["static-title", "staticTitle"], showStaticTitle: ["show-static-title", "showStaticTitle"], tooltipDisplayMode: ["tooltip-display-mode", "tooltipDisplayMode"], showEllipsisMenu: ["show-ellipsis-menu", "showEllipsisMenu"] }, outputs: { beforeOpenSidenav: "beforeOpenSidenav", afterOpenSidenav: "afterOpenSidenav", beforeCloseSidenav: "beforeCloseSidenav", afterCloseSidenav: "afterCloseSidenav" }, providers: [
         { provide: OAppLayoutBase, useExisting: forwardRef(() => OAppLayoutComponent) }
-    ], queries: [{ propertyName: "userInfoConfiguration", first: true, predicate: OUserInfoConfigurationDirective, descendants: true }], viewQueries: [{ propertyName: "appSidenav", first: true, predicate: ["appSidenav"], descendants: true }, { propertyName: "appHeader", first: true, predicate: ["appHeader"], descendants: true }], ngImport: i0, template: "<o-app-sidenav #appSidenav [sidenav-mode]=\"sidenavMode\" [opened]=\"sidenavOpened\" [show-user-info]=\"showUserInfo\" [show-toggle-button]=\"!showHeader\"\n  [opened-sidenav-image]=\"openedSidenavImg\" [closed-sidenav-image]=\"closedSidenavImg\" [layout-mode]=\"mode\" [class.header-layout]=\"showHeader\"\n  (onSidenavToggle)=\"sidenavToggle($event)\" (afterSidenavToggle)=\"afterToggle($event)\">\n\n  <ng-content select=\"o-app-layout-sidenav[position=start]\" ngProjectAs=\"o-app-layout-sidenav-projection-start\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav[position=end]\" ngProjectAs=\"o-app-layout-sidenav-projection-end\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav\" ngProjectAs=\"o-app-layout-sidenav-projection-end\"></ng-content>\n\n  <o-app-header #appHeader *ngIf=\"showHeader\" [show-title]=\"showTitle\" [show-static-title]=\"showStaticTitle\" [static-title]=\"staticTitle\"\n    [show-user-info]=\"showUserInfo\" [show-language-selector]=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"\n    (onSidenavToggle)=\"appSidenav.toggleSidenav()\" [color]=\"headerColor\" [header-height]=\"headerHeight\">\n    <mat-icon class=\"sidenav-toggle\" svgIcon=\"ontimize:menu\" (click)=\"appSidenav.toggleSidenav()\" *ngIf=\"appSidenav.isMobileMode()\"></mat-icon>\n    <ng-content select=\"o-app-layout-header[position=start]\" ngProjectAs=\"o-app-layout-header-projection-start\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header[position=end]\" ngProjectAs=\"o-app-layout-header-projection-end\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header\" ngProjectAs=\"o-app-layout-header-projection-start\"></ng-content>\n  </o-app-header>\n\n  <div class=\"application-layout-content-wrapper\" [class.header-layout]=\"showHeader\">\n    <ng-content></ng-content>\n  </div>\n</o-app-sidenav>\n", styles: [".application-layout-content-wrapper{z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto;padding:16px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OAppSidenavComponent, selector: "o-app-sidenav", inputs: ["opened", "show-user-info", "show-toggle-button", "opened-sidenav-image", "closed-sidenav-image", "layout-mode", "sidenav-mode", "store-state"], outputs: ["onSidenavOpenedChange", "onSidenavOpenedStart", "onSidenavClosedStart", "onSidenavToggle", "afterSidenavToggle"] }, { kind: "component", type: OAppHeaderComponent, selector: "o-app-header", inputs: ["show-user-info", "show-language-selector", "use-flag-icons", "color", "header-height", "show-title", "static-title", "show-static-title"], outputs: ["onSidenavToggle"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "userInfoConfiguration", first: true, predicate: OUserInfoConfigurationDirective, descendants: true }], viewQueries: [{ propertyName: "appSidenav", first: true, predicate: ["appSidenav"], descendants: true }, { propertyName: "appHeader", first: true, predicate: ["appHeader"], descendants: true }], ngImport: i0, template: "<o-app-sidenav #appSidenav [sidenav-mode]=\"sidenavMode\" [opened]=\"sidenavOpened\" [show-user-info]=\"showUserInfo\" [show-toggle-button]=\"!showHeader\"\n  [opened-sidenav-image]=\"openedSidenavImg\" [closed-sidenav-image]=\"closedSidenavImg\" [layout-mode]=\"mode\" [class.header-layout]=\"showHeader\"\n  [show-ellipsis-menu] = \"showEllipsisMenu\" (onSidenavToggle)=\"sidenavToggle($event)\" (afterSidenavToggle)=\"afterToggle($event)\">\n\n  <ng-content select=\"o-app-layout-sidenav[position=start]\" ngProjectAs=\"o-app-layout-sidenav-projection-start\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav[position=end]\" ngProjectAs=\"o-app-layout-sidenav-projection-end\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav\" ngProjectAs=\"o-app-layout-sidenav-projection-end\"></ng-content>\n\n  <o-app-header #appHeader *ngIf=\"showHeader\" [show-title]=\"showTitle\" [show-static-title]=\"showStaticTitle\" [static-title]=\"staticTitle\"\n    [show-user-info]=\"showUserInfo\" [show-language-selector]=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"\n    (onSidenavToggle)=\"appSidenav.toggleSidenav()\" [color]=\"headerColor\" [header-height]=\"headerHeight\">\n    <mat-icon class=\"sidenav-toggle\" svgIcon=\"ontimize:menu\" (click)=\"appSidenav.toggleSidenav()\" *ngIf=\"appSidenav.isMobileMode()\"></mat-icon>\n    <ng-content select=\"o-app-layout-header[position=start]\" ngProjectAs=\"o-app-layout-header-projection-start\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header[position=end]\" ngProjectAs=\"o-app-layout-header-projection-end\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header\" ngProjectAs=\"o-app-layout-header-projection-start\"></ng-content>\n  </o-app-header>\n\n  <div class=\"application-layout-content-wrapper\" [class.header-layout]=\"showHeader\">\n    <ng-content></ng-content>\n  </div>\n</o-app-sidenav>\n", styles: [".application-layout-content-wrapper{z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto;padding:16px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OAppSidenavComponent, selector: "o-app-sidenav", inputs: ["opened", "show-user-info", "show-toggle-button", "opened-sidenav-image", "closed-sidenav-image", "layout-mode", "sidenav-mode", "store-state", "show-ellipsis-menu"], outputs: ["onSidenavOpenedChange", "onSidenavOpenedStart", "onSidenavClosedStart", "onSidenavToggle", "afterSidenavToggle"] }, { kind: "component", type: OAppHeaderComponent, selector: "o-app-header", inputs: ["show-user-info", "show-language-selector", "use-flag-icons", "color", "header-height", "show-title", "static-title", "show-static-title"], outputs: ["onSidenavToggle"] }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -39515,12 +39569,16 @@ __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
 ], OAppLayoutComponent.prototype, "showStaticTitle", void 0);
+__decorate([
+    BooleanInputConverter(),
+    __metadata("design:type", Boolean)
+], OAppLayoutComponent.prototype, "showEllipsisMenu", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-app-layout', inputs: DEFAULT_INPUTS_O_APP_LAYOUT, outputs: DEFAULT_OUTPUTS_O_APP_LAYOUT, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: OAppLayoutBase, useExisting: forwardRef(() => OAppLayoutComponent) }
-                    ], template: "<o-app-sidenav #appSidenav [sidenav-mode]=\"sidenavMode\" [opened]=\"sidenavOpened\" [show-user-info]=\"showUserInfo\" [show-toggle-button]=\"!showHeader\"\n  [opened-sidenav-image]=\"openedSidenavImg\" [closed-sidenav-image]=\"closedSidenavImg\" [layout-mode]=\"mode\" [class.header-layout]=\"showHeader\"\n  (onSidenavToggle)=\"sidenavToggle($event)\" (afterSidenavToggle)=\"afterToggle($event)\">\n\n  <ng-content select=\"o-app-layout-sidenav[position=start]\" ngProjectAs=\"o-app-layout-sidenav-projection-start\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav[position=end]\" ngProjectAs=\"o-app-layout-sidenav-projection-end\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav\" ngProjectAs=\"o-app-layout-sidenav-projection-end\"></ng-content>\n\n  <o-app-header #appHeader *ngIf=\"showHeader\" [show-title]=\"showTitle\" [show-static-title]=\"showStaticTitle\" [static-title]=\"staticTitle\"\n    [show-user-info]=\"showUserInfo\" [show-language-selector]=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"\n    (onSidenavToggle)=\"appSidenav.toggleSidenav()\" [color]=\"headerColor\" [header-height]=\"headerHeight\">\n    <mat-icon class=\"sidenav-toggle\" svgIcon=\"ontimize:menu\" (click)=\"appSidenav.toggleSidenav()\" *ngIf=\"appSidenav.isMobileMode()\"></mat-icon>\n    <ng-content select=\"o-app-layout-header[position=start]\" ngProjectAs=\"o-app-layout-header-projection-start\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header[position=end]\" ngProjectAs=\"o-app-layout-header-projection-end\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header\" ngProjectAs=\"o-app-layout-header-projection-start\"></ng-content>\n  </o-app-header>\n\n  <div class=\"application-layout-content-wrapper\" [class.header-layout]=\"showHeader\">\n    <ng-content></ng-content>\n  </div>\n</o-app-sidenav>\n", styles: [".application-layout-content-wrapper{z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto;padding:16px}\n"] }]
-        }], propDecorators: { sidenavOpened: [], showUserInfo: [], showLanguageSelector: [], useFlagIcons: [], _showHeader: [], showTitle: [], showStaticTitle: [], appSidenav: [{
+                    ], template: "<o-app-sidenav #appSidenav [sidenav-mode]=\"sidenavMode\" [opened]=\"sidenavOpened\" [show-user-info]=\"showUserInfo\" [show-toggle-button]=\"!showHeader\"\n  [opened-sidenav-image]=\"openedSidenavImg\" [closed-sidenav-image]=\"closedSidenavImg\" [layout-mode]=\"mode\" [class.header-layout]=\"showHeader\"\n  [show-ellipsis-menu] = \"showEllipsisMenu\" (onSidenavToggle)=\"sidenavToggle($event)\" (afterSidenavToggle)=\"afterToggle($event)\">\n\n  <ng-content select=\"o-app-layout-sidenav[position=start]\" ngProjectAs=\"o-app-layout-sidenav-projection-start\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav[position=end]\" ngProjectAs=\"o-app-layout-sidenav-projection-end\">\n  </ng-content>\n  <ng-content select=\"o-app-layout-sidenav\" ngProjectAs=\"o-app-layout-sidenav-projection-end\"></ng-content>\n\n  <o-app-header #appHeader *ngIf=\"showHeader\" [show-title]=\"showTitle\" [show-static-title]=\"showStaticTitle\" [static-title]=\"staticTitle\"\n    [show-user-info]=\"showUserInfo\" [show-language-selector]=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"\n    (onSidenavToggle)=\"appSidenav.toggleSidenav()\" [color]=\"headerColor\" [header-height]=\"headerHeight\">\n    <mat-icon class=\"sidenav-toggle\" svgIcon=\"ontimize:menu\" (click)=\"appSidenav.toggleSidenav()\" *ngIf=\"appSidenav.isMobileMode()\"></mat-icon>\n    <ng-content select=\"o-app-layout-header[position=start]\" ngProjectAs=\"o-app-layout-header-projection-start\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header[position=end]\" ngProjectAs=\"o-app-layout-header-projection-end\">\n    </ng-content>\n    <ng-content select=\"o-app-layout-header\" ngProjectAs=\"o-app-layout-header-projection-start\"></ng-content>\n  </o-app-header>\n\n  <div class=\"application-layout-content-wrapper\" [class.header-layout]=\"showHeader\">\n    <ng-content></ng-content>\n  </div>\n</o-app-sidenav>\n", styles: [".application-layout-content-wrapper{z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto;padding:16px}\n"] }]
+        }], propDecorators: { sidenavOpened: [], showUserInfo: [], showLanguageSelector: [], useFlagIcons: [], _showHeader: [], showTitle: [], showStaticTitle: [], showEllipsisMenu: [], appSidenav: [{
                 type: ViewChild,
                 args: ['appSidenav']
             }], appHeader: [{