ontimize-web-ngx 15.5.0 → 15.5.2

package/fesm2020/ontimize-web-ngx.mjs

@@ -26648,7 +26648,9 @@ const DEFAULT_INPUTS_O_LIST = [
 ];
 const DEFAULT_OUTPUTS_O_LIST = [
     'onInsertButtonClick',
-    'onItemDeleted'
+    'onItemDeleted',
+    'onItemSelected',
+    'onItemDeselected'
 ];
 class OListComponent extends AbstractOServiceComponent {
     constructor(injector, elRef, form) {
@@ -26668,6 +26670,8 @@ class OListComponent extends AbstractOServiceComponent {
         this.subscription = new Subscription();
         this._quickFilterAppearance = 'outline';
         this.keysSqlTypesArray = [];
+        this.onItemSelected = new EventEmitter();
+        this.onItemDeselected = new EventEmitter();
         this.oMatSort = new OMatSort();
     }
     get state() {
@@ -26714,6 +26718,15 @@ class OListComponent extends AbstractOServiceComponent {
             this.state.totalQueryRecordsNumber = 0;
         }
         this.permissions = this.permissionsService.getListPermissions(this.oattr, this.actRoute);
+        const selectionSubscription = this.selection.changed.subscribe(({ added, removed }) => {
+            if (added?.length) {
+                ObservableWrapper.callEmit(this.onItemSelected, added);
+            }
+            if (removed?.length) {
+                ObservableWrapper.callEmit(this.onItemDeselected, removed);
+            }
+        });
+        this.subscription.add(selectionSubscription);
     }
     reinitialize(options) {
         super.reinitialize(options);
@@ -26870,7 +26883,7 @@ class OListComponent extends AbstractOServiceComponent {
     }
 }
 OListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: forwardRef(() => OFormComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OListComponent, selector: "o-list", inputs: { quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], refreshButton: ["refresh-button", "refreshButton"], route: "route", selectable: "selectable", deleteButton: ["delete-button", "deleteButton"], sortColumns: ["sort-columns", "sortColumns"], insertButtonPosition: ["insert-button-position", "insertButtonPosition"], insertButtonFloatable: ["insert-button-floatable", "insertButtonFloatable"], showButtonsText: ["show-buttons-text", "showButtonsText"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"] }, outputs: { onInsertButtonClick: "onInsertButtonClick", onItemDeleted: "onItemDeleted" }, host: { properties: { "class.o-list": "true" } }, providers: [
+OListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OListComponent, selector: "o-list", inputs: { quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], refreshButton: ["refresh-button", "refreshButton"], route: "route", selectable: "selectable", deleteButton: ["delete-button", "deleteButton"], sortColumns: ["sort-columns", "sortColumns"], insertButtonPosition: ["insert-button-position", "insertButtonPosition"], insertButtonFloatable: ["insert-button-floatable", "insertButtonFloatable"], showButtonsText: ["show-buttons-text", "showButtonsText"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"] }, outputs: { onInsertButtonClick: "onInsertButtonClick", onItemDeleted: "onItemDeleted", onItemSelected: "onItemSelected", onItemDeselected: "onItemDeselected" }, host: { properties: { "class.o-list": "true" } }, providers: [
         OntimizeServiceProvider,
         ComponentStateServiceProvider,
         { provide: O_COMPONENT_STATE_SERVICE, useClass: OListComponentStateService },
@@ -26969,10 +26982,14 @@ class OListItemComponent {
     }
 }
 OListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: forwardRef(() => OListComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OListItemComponent, selector: "o-list-item", host: { properties: { "class.o-list-item": "true" } }, queries: [{ propertyName: "_lines", predicate: MatListItemLine, descendants: true }, { propertyName: "_titles", predicate: MatListItemTitle, descendants: true }], viewQueries: [{ propertyName: "_innerListItem", first: true, predicate: ["innerListItem"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-item #innerListItem>\n  <div class=\"o-list-row-action o-list-item-selection-check\" *ngIf=\"_list && _list.selectable\">\n    <mat-checkbox [checked]=\"isSelected\" (change)=\"onCheckboxChange()\" (click)=\"onCheckboxClicked($event)\"></mat-checkbox>\n  </div>\n  <ng-content select=\"[o-list-item-avatar], [matListAvatar], [matListIcon]\"> </ng-content>\n  <div class=\"mat-mdc-list-item\">\n    <ng-content select=\"[matLine]\"></ng-content>\n  </div>\n  <!--matListItemMeta to put content into the meta section of a list item-->\n  <div matListItemMeta>\n    <ng-content select=\"o-list-item-card-image,o-list-item-card\"></ng-content>\n  </div>\n  <ng-content select=\"o-list-item-text,o-list-item-avatar, [o-list-item]\"></ng-content>\n\n  <div fxLayout=\"row\" class=\"row-buttons-container\">\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.editButtonInRow\" (click)=\"onEditIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.editButtonInRowIcon }}</mat-icon>\n    </div>\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.detailButtonInRow\" (click)=\"onDetailIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.detailButtonInRowIcon }}</mat-icon>\n    </div>\n  </div>\n</mat-list-item>\n", styles: [".o-list-item{display:flex}.o-list-item .o-card-item{padding:8px 4px}.o-list-item .mat-mdc-list-item{width:100%}.o-list-item .mat-mdc-list-item.mdc-list-item--with-trailing-meta{height:auto}.o-list-item .mat-mdc-list-item .row-buttons-container .o-list-row-action{height:24px;text-align:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemMeta, selector: "[matListItemMeta]" }], encapsulation: i0.ViewEncapsulation.None });
+OListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OListItemComponent, selector: "o-list-item", host: { properties: { "class.o-list-item": "true" } }, providers: [
+        { provide: ListItem, useExisting: forwardRef(() => OListItemComponent) }
+    ], queries: [{ propertyName: "_lines", predicate: MatListItemLine, descendants: true }, { propertyName: "_titles", predicate: MatListItemTitle, descendants: true }], viewQueries: [{ propertyName: "_innerListItem", first: true, predicate: ["innerListItem"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-item #innerListItem>\n  <div class=\"o-list-row-action o-list-item-selection-check\" *ngIf=\"_list && _list.selectable\">\n    <mat-checkbox [checked]=\"isSelected\" (change)=\"onCheckboxChange()\" (click)=\"onCheckboxClicked($event)\"></mat-checkbox>\n  </div>\n  <ng-content select=\"[o-list-item-avatar], [matListAvatar], [matListIcon]\"> </ng-content>\n  <div class=\"mat-mdc-list-item\">\n    <ng-content select=\"[matLine]\"></ng-content>\n  </div>\n  <!--matListItemMeta to put content into the meta section of a list item-->\n  <div matListItemMeta>\n    <ng-content select=\"o-list-item-card-image,o-list-item-card\"></ng-content>\n  </div>\n  <ng-content select=\"o-list-item-text,o-list-item-avatar, [o-list-item]\"></ng-content>\n\n  <div fxLayout=\"row\" class=\"row-buttons-container\">\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.editButtonInRow\" (click)=\"onEditIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.editButtonInRowIcon }}</mat-icon>\n    </div>\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.detailButtonInRow\" (click)=\"onDetailIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.detailButtonInRowIcon }}</mat-icon>\n    </div>\n  </div>\n</mat-list-item>\n", styles: [".o-list-item{display:flex}.o-list-item .o-card-item{padding:8px 4px}.o-list-item .mat-mdc-list-item{width:100%}.o-list-item .mat-mdc-list-item.mdc-list-item--with-trailing-meta{height:auto}.o-list-item .mat-mdc-list-item .row-buttons-container .o-list-row-action{height:24px;text-align:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemMeta, selector: "[matListItemMeta]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'o-list-item', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'o-list-item', encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: ListItem, useExisting: forwardRef(() => OListItemComponent) }
+                    ], host: {
                         '[class.o-list-item]': 'true'
                     }, template: "<mat-list-item #innerListItem>\n  <div class=\"o-list-row-action o-list-item-selection-check\" *ngIf=\"_list && _list.selectable\">\n    <mat-checkbox [checked]=\"isSelected\" (change)=\"onCheckboxChange()\" (click)=\"onCheckboxClicked($event)\"></mat-checkbox>\n  </div>\n  <ng-content select=\"[o-list-item-avatar], [matListAvatar], [matListIcon]\"> </ng-content>\n  <div class=\"mat-mdc-list-item\">\n    <ng-content select=\"[matLine]\"></ng-content>\n  </div>\n  <!--matListItemMeta to put content into the meta section of a list item-->\n  <div matListItemMeta>\n    <ng-content select=\"o-list-item-card-image,o-list-item-card\"></ng-content>\n  </div>\n  <ng-content select=\"o-list-item-text,o-list-item-avatar, [o-list-item]\"></ng-content>\n\n  <div fxLayout=\"row\" class=\"row-buttons-container\">\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.editButtonInRow\" (click)=\"onEditIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.editButtonInRowIcon }}</mat-icon>\n    </div>\n    <div class=\"o-list-row-action o-list-item-icon\" *ngIf=\"_list && _list.detailButtonInRow\" (click)=\"onDetailIconClicked($event)\">\n      <mat-icon class=\"material-icons\">{{ _list.detailButtonInRowIcon }}</mat-icon>\n    </div>\n  </div>\n</mat-list-item>\n", styles: [".o-list-item{display:flex}.o-list-item .o-card-item{padding:8px 4px}.o-list-item .mat-mdc-list-item{width:100%}.o-list-item .mat-mdc-list-item.mdc-list-item--with-trailing-meta{height:auto}.o-list-item .mat-mdc-list-item .row-buttons-container .o-list-row-action{height:24px;text-align:center;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: OListComponent, decorators: [{
@@ -32281,7 +32298,6 @@ class OTableComponent extends AbstractOServiceComponent {
         if (Util.isDefined(_sort) &&
             (!Util.isDefined(this.sort) || (Util.isDefined(this.sort) && Util.stringify(this.sort) !== Util.stringify(_sort)))) {
             this.sort = _sort;
-            this.registerSortListener();
             this.setDatasource();
         }
     }
@@ -33158,6 +33174,7 @@ class OTableComponent extends AbstractOServiceComponent {
         const dataSourceService = this.injector.get(OTableDataSourceService);
         this.dataSource = dataSourceService.getInstance(this);
         this.registerDataSourceListeners();
+        this.registerSortListener();
     }
     registerDataSourceListeners() {
         this.onRenderedDataChange = this.dataSource.onRenderedDataChange.subscribe(() => {
@@ -38317,7 +38334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 const DEFAULT_INPUTS_O_USER_INFO = [
     'showProfile: show-profile',
     'showSettings: show-settings',
-    'showLogout: show-logout'
+    'showLogout: show-logout',
+    'id'
 ];
 const DEFAULT_OUTPUTS_O_USER_INFO = [];
 class OUserInfoComponent {
@@ -38368,7 +38386,7 @@ class OUserInfoComponent {
     }
 }
 OUserInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OUserInfoComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-OUserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OUserInfoComponent, selector: "o-user-info", inputs: { showProfile: ["show-profile", "showProfile"], showSettings: ["show-settings", "showSettings"], showLogout: ["show-logout", "showLogout"] }, host: { properties: { "class.o-user-info": "true" } }, ngImport: i0, template: "<div class=\"o-user-info-container\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n  <ng-container *ngIf=\"existsUserInfo\">\n    <div class=\"o-user-info-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"center center\" [matMenuTriggerFor]=\"menu\"\n      fxLayoutGap=\"16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-user-info-avatar-wrapper\">\n        <img [src]=\"avatar\" *ngIf=\"avatar\" alt=\"avatar image\"/>\n      </div>\n      <span class=\"o-user-info-username\" *ngIf=\"username\"> {{ username }}</span>\n      <mat-icon svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n    </div>\n    <mat-menu #menu=\"matMenu\" yPosition=\"below\" class=\"o-mat-menu\">\n      <button type=\"button\" mat-menu-item (click)=\"onProfileClick()\" *ngIf=\"showProfile\">\n        <mat-icon>person</mat-icon>\n        <span>{{ 'APP_LAYOUT.USER_PROFILE' | oTranslate }}</span>\n      </button>\n      <button type=\"button\" mat-menu-item (click)=\"onSettingsClick()\" *ngIf=\"showSettings\">\n        <mat-icon svgIcon=\"ontimize:settings\"></mat-icon>\n        <span>{{ 'APP_LAYOUT.SETTINGS' | oTranslate }}</span>\n      </button>\n      <ng-container *ngIf=\"userInfoConfiguration\">\n        <button *ngFor=\"let item of userInfoConfiguration.userInfoConfigurationItems\" type=\"button\" mat-menu-item\n          [matTooltip]=\"item.name | oTranslate\" matTooltipDisabled=\"item.tooltip\" [ngClass]=\"item.class\"\n          (click)=\"item.triggerOnClick($event)\">\n          <mat-icon>{{item.icon}} </mat-icon>\n          <span>{{ item.name | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <button type=\"button\" mat-menu-item (click)=\"onLogoutClick()\" *ngIf=\"showLogout\">\n        <mat-icon svgIcon=\"ontimize:power_settings_new\"></mat-icon>\n        <span>{{ 'LOGOUT' | oTranslate }}</span>\n      </button>\n\n    </mat-menu>\n  </ng-container>\n</div>", styles: [".o-user-info .o-user-info-container{cursor:pointer;height:100%}.o-user-info .o-user-info-avatar-wrapper{width:30px;height:30px;overflow:hidden;border-radius:100%}.o-user-info .o-user-info-avatar-wrapper img{max-width:100%;height:auto}.o-user-info mat-icon{font-size:16px;line-height:26px;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+OUserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OUserInfoComponent, selector: "o-user-info", inputs: { showProfile: ["show-profile", "showProfile"], showSettings: ["show-settings", "showSettings"], showLogout: ["show-logout", "showLogout"], id: "id" }, host: { properties: { "class.o-user-info": "true" } }, ngImport: i0, template: "<div class=\"o-user-info-container\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n  <ng-container *ngIf=\"existsUserInfo\">\n    <div class=\"o-user-info-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"center center\" [matMenuTriggerFor]=\"menu\"\n      fxLayoutGap=\"16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-user-info-avatar-wrapper\">\n        <img [src]=\"avatar\" *ngIf=\"avatar\" alt=\"avatar image\"/>\n      </div>\n      <span class=\"o-user-info-username\" *ngIf=\"username\"> {{ username }}</span>\n      <mat-icon id=\"arrow-icon\" svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n    </div>\n    <mat-menu #menu=\"matMenu\" yPosition=\"below\" class=\"o-mat-menu\">\n      <button type=\"button\" mat-menu-item (click)=\"onProfileClick()\" *ngIf=\"showProfile\">\n        <mat-icon>person</mat-icon>\n        <span>{{ 'APP_LAYOUT.USER_PROFILE' | oTranslate }}</span>\n      </button>\n      <button id=\"menu-settings\" type=\"button\" mat-menu-item (click)=\"onSettingsClick()\" *ngIf=\"showSettings\">\n        <mat-icon svgIcon=\"ontimize:settings\"></mat-icon>\n        <span>{{ 'APP_LAYOUT.SETTINGS' | oTranslate }}</span>\n      </button>\n      <ng-container *ngIf=\"userInfoConfiguration\">\n        <button *ngFor=\"let item of userInfoConfiguration.userInfoConfigurationItems\" type=\"button\" mat-menu-item\n          [matTooltip]=\"item.name | oTranslate\" matTooltipDisabled=\"item.tooltip\" [ngClass]=\"item.class\"\n          (click)=\"item.triggerOnClick($event)\">\n          <mat-icon>{{item.icon}} </mat-icon>\n          <span>{{ item.name | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <button id=\"menu-logout\" type=\"button\" mat-menu-item (click)=\"onLogoutClick()\" *ngIf=\"showLogout\">\n        <mat-icon svgIcon=\"ontimize:power_settings_new\"></mat-icon>\n        <span>{{ 'LOGOUT' | oTranslate }}</span>\n      </button>\n\n    </mat-menu>\n  </ng-container>\n</div>", styles: [".o-user-info .o-user-info-container{cursor:pointer;height:100%}.o-user-info .o-user-info-avatar-wrapper{width:30px;height:30px;overflow:hidden;border-radius:100%}.o-user-info .o-user-info-avatar-wrapper img{max-width:100%;height:auto}.o-user-info mat-icon{font-size:16px;line-height:26px;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -38385,7 +38403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Component,
             args: [{ selector: 'o-user-info', inputs: DEFAULT_INPUTS_O_USER_INFO, outputs: DEFAULT_OUTPUTS_O_USER_INFO, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-user-info]': 'true'
-                    }, template: "<div class=\"o-user-info-container\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n  <ng-container *ngIf=\"existsUserInfo\">\n    <div class=\"o-user-info-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"center center\" [matMenuTriggerFor]=\"menu\"\n      fxLayoutGap=\"16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-user-info-avatar-wrapper\">\n        <img [src]=\"avatar\" *ngIf=\"avatar\" alt=\"avatar image\"/>\n      </div>\n      <span class=\"o-user-info-username\" *ngIf=\"username\"> {{ username }}</span>\n      <mat-icon svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n    </div>\n    <mat-menu #menu=\"matMenu\" yPosition=\"below\" class=\"o-mat-menu\">\n      <button type=\"button\" mat-menu-item (click)=\"onProfileClick()\" *ngIf=\"showProfile\">\n        <mat-icon>person</mat-icon>\n        <span>{{ 'APP_LAYOUT.USER_PROFILE' | oTranslate }}</span>\n      </button>\n      <button type=\"button\" mat-menu-item (click)=\"onSettingsClick()\" *ngIf=\"showSettings\">\n        <mat-icon svgIcon=\"ontimize:settings\"></mat-icon>\n        <span>{{ 'APP_LAYOUT.SETTINGS' | oTranslate }}</span>\n      </button>\n      <ng-container *ngIf=\"userInfoConfiguration\">\n        <button *ngFor=\"let item of userInfoConfiguration.userInfoConfigurationItems\" type=\"button\" mat-menu-item\n          [matTooltip]=\"item.name | oTranslate\" matTooltipDisabled=\"item.tooltip\" [ngClass]=\"item.class\"\n          (click)=\"item.triggerOnClick($event)\">\n          <mat-icon>{{item.icon}} </mat-icon>\n          <span>{{ item.name | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <button type=\"button\" mat-menu-item (click)=\"onLogoutClick()\" *ngIf=\"showLogout\">\n        <mat-icon svgIcon=\"ontimize:power_settings_new\"></mat-icon>\n        <span>{{ 'LOGOUT' | oTranslate }}</span>\n      </button>\n\n    </mat-menu>\n  </ng-container>\n</div>", styles: [".o-user-info .o-user-info-container{cursor:pointer;height:100%}.o-user-info .o-user-info-avatar-wrapper{width:30px;height:30px;overflow:hidden;border-radius:100%}.o-user-info .o-user-info-avatar-wrapper img{max-width:100%;height:auto}.o-user-info mat-icon{font-size:16px;line-height:26px;height:100%}\n"] }]
+                    }, template: "<div class=\"o-user-info-container\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n  <ng-container *ngIf=\"existsUserInfo\">\n    <div class=\"o-user-info-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"center center\" [matMenuTriggerFor]=\"menu\"\n      fxLayoutGap=\"16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"o-user-info-avatar-wrapper\">\n        <img [src]=\"avatar\" *ngIf=\"avatar\" alt=\"avatar image\"/>\n      </div>\n      <span class=\"o-user-info-username\" *ngIf=\"username\"> {{ username }}</span>\n      <mat-icon id=\"arrow-icon\" svgIcon=\"ontimize:keyboard_arrow_down\"></mat-icon>\n    </div>\n    <mat-menu #menu=\"matMenu\" yPosition=\"below\" class=\"o-mat-menu\">\n      <button type=\"button\" mat-menu-item (click)=\"onProfileClick()\" *ngIf=\"showProfile\">\n        <mat-icon>person</mat-icon>\n        <span>{{ 'APP_LAYOUT.USER_PROFILE' | oTranslate }}</span>\n      </button>\n      <button id=\"menu-settings\" type=\"button\" mat-menu-item (click)=\"onSettingsClick()\" *ngIf=\"showSettings\">\n        <mat-icon svgIcon=\"ontimize:settings\"></mat-icon>\n        <span>{{ 'APP_LAYOUT.SETTINGS' | oTranslate }}</span>\n      </button>\n      <ng-container *ngIf=\"userInfoConfiguration\">\n        <button *ngFor=\"let item of userInfoConfiguration.userInfoConfigurationItems\" type=\"button\" mat-menu-item\n          [matTooltip]=\"item.name | oTranslate\" matTooltipDisabled=\"item.tooltip\" [ngClass]=\"item.class\"\n          (click)=\"item.triggerOnClick($event)\">\n          <mat-icon>{{item.icon}} </mat-icon>\n          <span>{{ item.name | oTranslate }}</span>\n        </button>\n      </ng-container>\n      <button id=\"menu-logout\" type=\"button\" mat-menu-item (click)=\"onLogoutClick()\" *ngIf=\"showLogout\">\n        <mat-icon svgIcon=\"ontimize:power_settings_new\"></mat-icon>\n        <span>{{ 'LOGOUT' | oTranslate }}</span>\n      </button>\n\n    </mat-menu>\n  </ng-container>\n</div>", styles: [".o-user-info .o-user-info-container{cursor:pointer;height:100%}.o-user-info .o-user-info-avatar-wrapper{width:30px;height:30px;overflow:hidden;border-radius:100%}.o-user-info .o-user-info-avatar-wrapper img{max-width:100%;height:auto}.o-user-info mat-icon{font-size:16px;line-height:26px;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1.Router }]; }, propDecorators: { showLogout: [], showSettings: [], showProfile: [] } });
 
 const DEFAULT_INPUTS_O_USER_INFO_MENU_ITEM = [
@@ -38559,7 +38577,7 @@ class OAppHeaderComponent {
 OAppHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppHeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 OAppHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppHeaderComponent, selector: "o-app-header", inputs: { showUserInfo: ["show-user-info", "showUserInfo"], showLanguageSelector: ["show-language-selector", "showLanguageSelector"], useFlagIcons: ["use-flag-icons", "useFlagIcons"], color: "color", headerHeight: ["header-height", "headerHeight"], showTitle: ["show-title", "showTitle"], staticTitle: ["static-title", "staticTitle"], showStaticTitle: ["show-static-title", "showStaticTitle"] }, outputs: { onSidenavToggle: "onSidenavToggle" }, host: { properties: { "class.o-app-header": "true", "class.o-app-header-small": "headerHeight===\"small\"", "class.o-app-header-medium": "headerHeight===\"medium\"", "class.o-app-header-large": "headerHeight===\"large\"" } }, providers: [
         { provide: OAppHeaderBase, useExisting: forwardRef(() => OAppHeaderComponent) }
-    ], viewQueries: [{ propertyName: "userInfo", first: true, predicate: ["userInfo"], descendants: true }], ngImport: i0, template: "<nav fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\" [ngClass]=\"color ? 'o-app-header-'+color : ''\">\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n    <ng-content></ng-content>\n    <ng-content select=\"o-app-layout-header-projection-start\"></ng-content>\n    <span *ngIf=\"showTitle && !showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ headerTitle$ | async | oTranslate }}\n    </span>\n    <span *ngIf=\"showTitle && showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ staticTitle | oTranslate }}\n    </span>\n    <div fxLayout=\"row\" fxLayoutAlign=\"end stretch\" class=\"o-app-header-default-actions\">\n      <div class=\"layout-header-projection-end\">\n        <ng-content select=\"o-app-layout-header-projection-end\"></ng-content>\n      </div>\n      <o-user-info #userInfo *ngIf=\"showUserInfo\"></o-user-info>\n      <o-language-selector *ngIf=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n    </div>\n  </div>\n</nav>\n", styles: [".o-app-header{z-index:2;box-shadow:0 2px 6px #00000029}.o-app-header.o-app-header-large{height:56px}.o-app-header.o-app-header-large+.header-layout{top:56px}.o-app-header.o-app-header-large .o-user-info{font-size:16px}.o-app-header.o-app-header-large .o-user-info .o-user-info-avatar-wrapper{height:40px;width:40px}.o-app-header.o-app-header-medium{height:48px}.o-app-header.o-app-header-medium+.header-layout{top:48px}.o-app-header.o-app-header-medium .o-user-info{font-size:16px}.o-app-header.o-app-header-medium .o-user-info .o-user-info-avatar-wrapper{height:32px;width:32px}.o-app-header.o-app-header-small{height:40px}.o-app-header.o-app-header-small+.header-layout{top:40px}.o-app-header.o-app-header-small .o-user-info{font-size:14px}.o-app-header.o-app-header-small .o-user-info .o-user-info-avatar-wrapper{height:30px;width:30px}.o-app-header nav{padding-right:16px}.o-app-header nav .sidenav-toggle{text-align:center;padding:16px;cursor:pointer}.o-app-header nav .o-app-header-title{padding:0 16px;cursor:default}.o-app-header nav .o-app-header-default-actions{margin-left:auto}.o-app-header nav .o-app-header-default-actions .layout-header-projection-end{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OLanguageSelectorComponent, selector: "o-language-selector", inputs: ["use-flag-icons"], outputs: ["onChange"] }, { kind: "component", type: OUserInfoComponent, selector: "o-user-info", inputs: ["show-profile", "show-settings", "show-logout"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "userInfo", first: true, predicate: ["userInfo"], descendants: true }], ngImport: i0, template: "<nav fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\" [ngClass]=\"color ? 'o-app-header-'+color : ''\">\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n    <ng-content></ng-content>\n    <ng-content select=\"o-app-layout-header-projection-start\"></ng-content>\n    <span *ngIf=\"showTitle && !showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ headerTitle$ | async | oTranslate }}\n    </span>\n    <span *ngIf=\"showTitle && showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ staticTitle | oTranslate }}\n    </span>\n    <div fxLayout=\"row\" fxLayoutAlign=\"end stretch\" class=\"o-app-header-default-actions\">\n      <div class=\"layout-header-projection-end\">\n        <ng-content select=\"o-app-layout-header-projection-end\"></ng-content>\n      </div>\n      <o-user-info #userInfo id=\"userInfo\" *ngIf=\"showUserInfo\"></o-user-info>\n      <o-language-selector *ngIf=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n    </div>\n  </div>\n</nav>\n", styles: [".o-app-header{z-index:2;box-shadow:0 2px 6px #00000029}.o-app-header.o-app-header-large{height:56px}.o-app-header.o-app-header-large+.header-layout{top:56px}.o-app-header.o-app-header-large .o-user-info{font-size:16px}.o-app-header.o-app-header-large .o-user-info .o-user-info-avatar-wrapper{height:40px;width:40px}.o-app-header.o-app-header-medium{height:48px}.o-app-header.o-app-header-medium+.header-layout{top:48px}.o-app-header.o-app-header-medium .o-user-info{font-size:16px}.o-app-header.o-app-header-medium .o-user-info .o-user-info-avatar-wrapper{height:32px;width:32px}.o-app-header.o-app-header-small{height:40px}.o-app-header.o-app-header-small+.header-layout{top:40px}.o-app-header.o-app-header-small .o-user-info{font-size:14px}.o-app-header.o-app-header-small .o-user-info .o-user-info-avatar-wrapper{height:30px;width:30px}.o-app-header nav{padding-right:16px}.o-app-header nav .sidenav-toggle{text-align:center;padding:16px;cursor:pointer}.o-app-header nav .o-app-header-title{padding:0 16px;cursor:default}.o-app-header nav .o-app-header-default-actions{margin-left:auto}.o-app-header nav .o-app-header-default-actions .layout-header-projection-end{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OLanguageSelectorComponent, selector: "o-language-selector", inputs: ["use-flag-icons"], outputs: ["onChange"] }, { kind: "component", type: OUserInfoComponent, selector: "o-user-info", inputs: ["show-profile", "show-settings", "show-logout", "id"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -38581,7 +38599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         '[class.o-app-header-large]': 'headerHeight==="large"'
                     }, providers: [
                         { provide: OAppHeaderBase, useExisting: forwardRef(() => OAppHeaderComponent) }
-                    ], template: "<nav fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\" [ngClass]=\"color ? 'o-app-header-'+color : ''\">\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n    <ng-content></ng-content>\n    <ng-content select=\"o-app-layout-header-projection-start\"></ng-content>\n    <span *ngIf=\"showTitle && !showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ headerTitle$ | async | oTranslate }}\n    </span>\n    <span *ngIf=\"showTitle && showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ staticTitle | oTranslate }}\n    </span>\n    <div fxLayout=\"row\" fxLayoutAlign=\"end stretch\" class=\"o-app-header-default-actions\">\n      <div class=\"layout-header-projection-end\">\n        <ng-content select=\"o-app-layout-header-projection-end\"></ng-content>\n      </div>\n      <o-user-info #userInfo *ngIf=\"showUserInfo\"></o-user-info>\n      <o-language-selector *ngIf=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n    </div>\n  </div>\n</nav>\n", styles: [".o-app-header{z-index:2;box-shadow:0 2px 6px #00000029}.o-app-header.o-app-header-large{height:56px}.o-app-header.o-app-header-large+.header-layout{top:56px}.o-app-header.o-app-header-large .o-user-info{font-size:16px}.o-app-header.o-app-header-large .o-user-info .o-user-info-avatar-wrapper{height:40px;width:40px}.o-app-header.o-app-header-medium{height:48px}.o-app-header.o-app-header-medium+.header-layout{top:48px}.o-app-header.o-app-header-medium .o-user-info{font-size:16px}.o-app-header.o-app-header-medium .o-user-info .o-user-info-avatar-wrapper{height:32px;width:32px}.o-app-header.o-app-header-small{height:40px}.o-app-header.o-app-header-small+.header-layout{top:40px}.o-app-header.o-app-header-small .o-user-info{font-size:14px}.o-app-header.o-app-header-small .o-user-info .o-user-info-avatar-wrapper{height:30px;width:30px}.o-app-header nav{padding-right:16px}.o-app-header nav .sidenav-toggle{text-align:center;padding:16px;cursor:pointer}.o-app-header nav .o-app-header-title{padding:0 16px;cursor:default}.o-app-header nav .o-app-header-default-actions{margin-left:auto}.o-app-header nav .o-app-header-default-actions .layout-header-projection-end{margin-right:16px}\n"] }]
+                    ], template: "<nav fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\" [ngClass]=\"color ? 'o-app-header-'+color : ''\">\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n    <ng-content></ng-content>\n    <ng-content select=\"o-app-layout-header-projection-start\"></ng-content>\n    <span *ngIf=\"showTitle && !showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ headerTitle$ | async | oTranslate }}\n    </span>\n    <span *ngIf=\"showTitle && showStaticTitle\" class=\"o-app-header-title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      {{ staticTitle | oTranslate }}\n    </span>\n    <div fxLayout=\"row\" fxLayoutAlign=\"end stretch\" class=\"o-app-header-default-actions\">\n      <div class=\"layout-header-projection-end\">\n        <ng-content select=\"o-app-layout-header-projection-end\"></ng-content>\n      </div>\n      <o-user-info #userInfo id=\"userInfo\" *ngIf=\"showUserInfo\"></o-user-info>\n      <o-language-selector *ngIf=\"showLanguageSelector\" [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n    </div>\n  </div>\n</nav>\n", styles: [".o-app-header{z-index:2;box-shadow:0 2px 6px #00000029}.o-app-header.o-app-header-large{height:56px}.o-app-header.o-app-header-large+.header-layout{top:56px}.o-app-header.o-app-header-large .o-user-info{font-size:16px}.o-app-header.o-app-header-large .o-user-info .o-user-info-avatar-wrapper{height:40px;width:40px}.o-app-header.o-app-header-medium{height:48px}.o-app-header.o-app-header-medium+.header-layout{top:48px}.o-app-header.o-app-header-medium .o-user-info{font-size:16px}.o-app-header.o-app-header-medium .o-user-info .o-user-info-avatar-wrapper{height:32px;width:32px}.o-app-header.o-app-header-small{height:40px}.o-app-header.o-app-header-small+.header-layout{top:40px}.o-app-header.o-app-header-small .o-user-info{font-size:14px}.o-app-header.o-app-header-small .o-user-info .o-user-info-avatar-wrapper{height:30px;width:30px}.o-app-header nav{padding-right:16px}.o-app-header nav .sidenav-toggle{text-align:center;padding:16px;cursor:pointer}.o-app-header nav .o-app-header-title{padding:0 16px;cursor:default}.o-app-header nav .o-app-header-default-actions{margin-left:auto}.o-app-header nav .o-app-header-default-actions .layout-header-projection-end{margin-right:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { userInfo: [{
                 type: ViewChild,
                 args: ['userInfo']
@@ -38856,7 +38874,7 @@ class OAppSidenavMenuItemComponent {
     }
 }
 OAppSidenavMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OAppSidenavMenuItemComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OAppSidenavMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OAppSidenavMenuItemComponent, selector: "o-app-sidenav-menu-item", inputs: { menuItem: ["menu-item", "menuItem"], menuItemType: ["menu-item-type", "menuItemType"], sidenavOpened: ["sidenav-opened", "sidenavOpened"], disabled: "disabled" }, outputs: { onClick: "onClick" }, host: { properties: { "class": "getClass()", "attr.disabled": "disabled" } }, ngImport: i0, template: "<ng-container *ngIf=\"sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\">\n\n    <a mat-button *ngIf=\"!isUserInfoItem() && !isLocaleItem()\" (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        <span class=\"o-app-sidenav-menuitem-title\">{{ menuItem.name | oTranslate }}</span>\n      </div>\n    </a>\n\n    <a mat-button *ngIf=\"isLocaleItem()\" (click)=\"triggerClick($event)\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n        <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n        <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n        {{ menuItem.name | oTranslate }}\n        <mat-icon *ngIf=\"isConfiguredLang()\" class=\"configured-lang\">check_circle</mat-icon>\n      </div>\n    </a>\n\n    <div *ngIf=\"isUserInfoItem()\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"o-user-info-menu-item\">\n      <div class=\"o-user-info-image\" fxFlexFill></div>\n      <div class=\"o-user-info-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlexFill>\n        <div class=\"o-user-info-name\">{{ menuItem.user }} </div>\n        <o-language-selector [use-flag-icons]=\"useFlagIcons\"></o-language-selector>\n      </div>\n    </div>\n  </li>\n</ng-container>\n\n<ng-container *ngIf=\"!sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\">\n    <a [matTooltip]=\"tooltip\" matTooltipClass=\"menuitem-tooltip\" matTooltipPosition=\"right\" mat-button (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <mat-icon *ngIf=\"menuItem.svgIcon\" [svgIcon]=\"menuItem.svgIcon\"></mat-icon>\n      <mat-icon *ngIf=\"menuItem.icon\">{{ menuItem.icon }}</mat-icon>\n    </a>\n  </li>\n</ng-container>\n", styles: [".o-app-sidenav-menu-item .o-user-info-menu-item{cursor:default}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-image{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;height:200px!important}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-item{padding:0 8px 0 16px}.o-app-sidenav-menu-item .o-user-info-menu-item .o-user-info-name{text-transform:uppercase;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OLanguageSelectorComponent, selector: "o-language-selector", inputs: ["use-flag-icons"], outputs: ["onChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+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: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OLanguageSelectorComponent, selector: "o-language-selector", inputs: ["use-flag-icons"], outputs: ["onChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -38870,7 +38888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             args: [{ selector: 'o-app-sidenav-menu-item', inputs: DEFAULT_INPUTS_O_APP_SIDENAV_MENU_ITEM, outputs: DEFAULT_OUTPUTS_O_APP_SIDENAV_MENU_ITEM, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'getClass()',
                         '[attr.disabled]': 'disabled'
-                    }, template: "<ng-container *ngIf=\"sidenavOpened\">\n  <li *ngIf=\"!hidden\" class=\"o-app-sidenav-menuitem o-app-sidenav-item\" [class.o-user-info]=\"isUserInfoItem()\">\n\n    <a mat-button *ngIf=\"!isUserInfoItem() && !isLocaleItem()\" (click)=\"triggerClick($event)\"\n      [class.o-app-sidenav-viewer-sidenav-item-selected]=\"active\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"menuItem.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  <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"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sidenavOpened: [], disabled: [] } });
 
 const DEFAULT_INPUTS_O_APP_SIDENAV_MENU_GROUP = [