import { Component, Input, EventEmitter } from '@angular/core';
import { VERSION } from '@angular/core';
import { Breakpoints } from '@angular/cdk/layout';
import { map, shareReplay } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/layout";
import * as i2 from "@angular/router";
import * as i3 from "mobicloud-core";
import * as i4 from "../mobicloud-components.service";
import * as i5 from "@angular/common";
import * as i6 from "angular-svg-icon";
import * as i7 from "@angular/material/sidenav";
import * as i8 from "@angular/material/button";
import * as i9 from "@angular/material/icon";
import * as i10 from "@angular/material/expansion";
import * as i11 from "@angular/material/list";
import * as i12 from "@angular/material/menu";
import * as i13 from "@angular/material/tooltip";
import * as i14 from "@angular/material/toolbar";
import * as i15 from "devextreme-angular/core";
import * as i16 from "devextreme-angular/ui/nested";
import * as i17 from "devextreme-angular";
import * as i18 from "devextreme-angular/ui/data-grid";
import * as i19 from "../directives/material-elevation.directive";
export class MainNavComponent {
    constructor(breakpointObserver, _router, coreService, componentsService) {
        this.breakpointObserver = breakpointObserver;
        this._router = _router;
        this.coreService = coreService;
        this.componentsService = componentsService;
        this.angularVersion = VERSION.major + '.' + VERSION.minor + '.' + VERSION.patch;
        this.angularVersion_Full = VERSION.full;
        this.showMainHeader = false;
        this.showMainSidebar = false;
        this.showMainFooter = false;
        this.ToolbarItemClick = new EventEmitter();
        this.sidebarOpened = true;
        this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset)
            .pipe(map(result => {
            return result.matches;
        }), shareReplay());
    }
    openedChangeSidenav(opened) {
        this.sidebarOpened = opened;
    }
    onToolbarItemClick(name, parameters) {
        this.ToolbarItemClick.emit({ name, parameters });
    }
    signout() {
        this.coreService.signout();
    }
    displayVersion() {
        console.log(`${this.coreService._appTitle ?? this.coreService._appName} v${this.coreService._appVersion}`);
        console.log(`Angular version: ${this.angularVersion_Full}`);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MainNavComponent, deps: [{ token: i1.BreakpointObserver }, { token: i2.Router }, { token: i3.MobicloudCoreService }, { token: i4.MobiCloudComponentsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MainNavComponent, selector: "mobicloud-main-nav", inputs: { appLogoTemplate: "appLogoTemplate", appTitleTemplate: "appTitleTemplate", organizationSelectorTemplate: "organizationSelectorTemplate", customerSelectorTemplate: "customerSelectorTemplate", vendorSelectorTemplate: "vendorSelectorTemplate", profileMenuTemplate: "profileMenuTemplate", menuNodes: "menuNodes", toolbarItems: "toolbarItems", title: "title", showMainHeader: "showMainHeader", showMainSidebar: "showMainSidebar", showMainFooter: "showMainFooter" }, ngImport: i0, template: "<mat-sidenav-container class=\"sidenav-container\" fullscreen>\n\n  <mat-sidenav #drawer class=\"sidenav\" fixedInViewport [attr.role]=\"(isHandset$ | async) ? 'dialog' : 'navigation'\"\n    [mode]=\"(isHandset$ | async) ? 'over' : 'side'\" [opened]=\"((isHandset$ | async) === false) && showMainSidebar\" (openedChange)=\"openedChangeSidenav($event)\">\n\n    <mat-toolbar class=\"menu-toolbar\">\n      <mat-toolbar-row>\n        <div class=\"menu-toolbar-content\">\n          <div class=\"menu-toolbar-logo-container\" routerLink=\"/\">\n            <ng-container [ngTemplateOutlet]=\"appLogoTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"appLogoTemplate\"></ng-container>\n            <svg-icon *ngIf=\"!appLogoTemplate\" name=\"mobicloud_logo\" class=\"menu-toolbar-logo-icon\"></svg-icon>\n          </div>          \n          <div class=\"menu-toolbar-app-tittle-container\">\n            <div class=\"menu-toolbar-app-burgermenu\">\n              <button type=\"button\" class=\"toolbar-menu-button toolbar-menu-button-inmenu\" aria-label=\"Toggle sidenav\"  mat-button (click)=\"drawer.toggle()\" matTooltip=\"Hide menu\" *ngIf=\"showMainSidebar\">\n                <mat-icon aria-label=\"menu icon\" class=\"toolbar-menu-button-icon\">menu</mat-icon>\n              </button> \n            </div>\n            <span class=\"menu-toolbar-app-divider\"></span>            \n                        \n            <div class=\"menu-toolbar-app-tittle-wrapper\">\n              <ng-container [ngTemplateOutlet]=\"appTitleTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"appTitleTemplate\"></ng-container>              \n              <div *ngIf=\"!appTitleTemplate\" class=\"menu-toolbar-app-tittle\">{{title}}</div>\n            </div>\n          </div>\n      </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <mat-nav-list>\n      <ng-container *ngFor=\"let menuNode1 of menuNodes\">\n          <ng-container *ngIf=\"!menuNode1.children; else hasChildren1\">\n          <!-- LEVEL 1 FLAT -->\n          <a mat-list-item [routerLink]=\"menuNode1.link\" [state]=\"menuNode1.linkstate\" class=\"navitem-level1\" [routerLinkActive]=\"['navitem-level1-active']\" routerLinkActive #rla1_flat=\"routerLinkActive\">\n            <mat-icon svgIcon=\"{{menuNode1.svg}}\" [ngClass]=\"{'inactive': !rla1_flat.isActive,'active': rla1_flat.isActive}\"></mat-icon>\n            <span>{{ menuNode1.caption }}</span>\n          </a>\n        </ng-container>\n        <ng-template #hasChildren1>\n          <!-- LEVEL 1 EXPAND -->\n          <mat-expansion-panel class=\"mat-elevation-z0 expansion-panel-level1\" routerLinkActive #rla1_expand=\"routerLinkActive\" [expanded]=\"rla1_expand.isActive\" [@.disabled]=\"true\">\n            <!-- <mat-expansion-panel class=\"mat-elevation-z0 expansion-panel-level1\" routerLinkActive #rla1_expand=\"routerLinkActive\" [expanded]=\"true\">    -->\n            <mat-expansion-panel-header [ngClass]=\"{'expansion-panel-header-level1': !rla1_expand.isActive,'expansion-panel-header-level1-active': rla1_expand.isActive}\">       \n              <mat-panel-title [ngClass]=\"{'expansion-panel-header-title-level1': !rla1_expand.isActive, 'expansion-panel-header-title-level1-active': rla1_expand.isActive}\">\n                <mat-icon svgIcon=\"{{menuNode1.svg}}\" [ngClass]=\"{'inactive': !rla1_expand.isActive,'active': rla1_expand.isActive}\"></mat-icon>\n                <span>{{ menuNode1.caption }}</span>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <ng-container *ngFor=\"let menuNode2 of menuNode1.children\">\n              <!-- LEVEL 2 -->\n              <ng-container *ngIf=\"!menuNode2.children; else hasChildren2\">\n                <!-- LEVEL 2 FLAT -->\n                <a mat-list-item [routerLink]=\"menuNode2.link\" [state]=\"menuNode2.linkstate\" class=\"navitem-level2-flat\" [routerLinkActive]=\"['navitem-level2-active-flat']\" routerLinkActive #rla2_flat=\"routerLinkActive\">\n                  <mat-icon svgIcon=\"{{menuNode2.svg}}\" [ngClass]=\"{'inactive': !rla2_flat.isActive,'active': rla2_flat.isActive}\"></mat-icon>\n                  <span>{{ menuNode2.caption }}</span>\n                </a>                \n              </ng-container>\n              <ng-template #hasChildren2>\n                <!-- LEVEL 2 EXPAND -->\n                <mat-expansion-panel class=\"mat-elevation-z0 expansion-panel-level2\" routerLinkActive #rla2_expand=\"routerLinkActive\" [expanded]=\"rla2_expand.isActive\" [@.disabled]=\"true\">        \n                  <mat-expansion-panel-header [ngClass]=\"{'expansion-panel-header-level2': !rla2_expand.isActive,'expansion-panel-header-level2-active': rla2_expand.isActive}\">       \n                    <mat-panel-title [ngClass]=\"{'expansion-panel-header-title-level2': !rla2_expand.isActive, 'expansion-panel-header-title-level2-active': rla2_expand.isActive}\">\n                      <mat-icon svgIcon=\"{{menuNode2.svg}}\" [ngClass]=\"{'inactive': !rla2_expand.isActive,'active': rla2_expand.isActive}\"></mat-icon>\n                      <span>{{ menuNode2.caption }}</span>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <ng-container *ngFor=\"let menuNode3 of menuNode2.children\">\n                    <!-- LEVEL 3 FLAT -->\n                    <a mat-list-item [routerLink]=\"menuNode3.link\" [state]=\"menuNode3.linkstate\" class=\"navitem-level3-flat\" [routerLinkActive]=\"['navitem-level3-active-flat']\" routerLinkActive #rla3_flat=\"routerLinkActive\">\n                      <mat-icon svgIcon=\"{{menuNode3.svg}}\" [ngClass]=\"{'inactive': !rla3_flat.isActive,'active': rla3_flat.isActive}\"></mat-icon>\n                      <span>{{ menuNode3.caption }}</span>\n                    </a>\n                  </ng-container>\n                </mat-expansion-panel>                \n              </ng-template>\n            </ng-container>\n          </mat-expansion-panel>                      \n        </ng-template>\n      </ng-container> \n\n    </mat-nav-list>\n\n  </mat-sidenav>\n\n  <!-- *ngIf=\"showMainSidebar\" -->\n\n  <mat-sidenav-content class=\"sidenav-maincontent\">\n    <mat-toolbar *ngIf=\"showMainHeader\">\n      <mat-toolbar-row>\n      <!-- <button type=\"button\" aria-label=\"Toggle sidenav\" mat-icon-button (click)=\"drawer.toggle()\"\n        *ngIf=\"(isHandset$ | async) && showMainSidebar\">\n        <mat-icon aria-label=\"menu icon\" class=\"toolbar-menu-button-icon\">menu</mat-icon>\n      </button>      -->\n      <button type=\"button\" class=\"toolbar-menu-button toolbar-menu-button-outmenu\" aria-label=\"Toggle sidenav\" mat-button (click)=\"drawer.toggle()\" matTooltip=\"Open menu\" *ngIf=\"showMainSidebar && !sidebarOpened\">\n        <mat-icon aria-label=\"menu icon\" class=\"toolbar-menu-button-icon\">menu</mat-icon>\n      </button>        \n\n      <div class=\"organization-select-container\" *ngIf=\"((componentsService.IS_MASTER_USER || componentsService.IS_MASTER_ADMIN) || (componentsService.ALLOW_SUBORGANIZATIONS)) && coreService.require_Organization\">\n        <ng-container [ngTemplateOutlet]=\"organizationSelectorTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"organizationSelectorTemplate\">\n        </ng-container> \n        \n        \n        <dx-drop-down-box *ngIf=\"!organizationSelectorTemplate\" stylingMode=\"outlined\" width=\"260px\" placeholder=\"Select Organization\" [showClearButton]=\"true\" [dataSource]=\"componentsService.ORGANIZATIONS_DATASOURCE\" [(value)]=\"componentsService.SELECTED_ORGANIZATION_ID\" valueExpr=\"OrganizationId\" displayExpr=\"Name\" [(opened)]=\"componentsService.ORGANIZATION_DROPDOWN_OPENED\" (onValueChanged)=\"componentsService.ORGANIZATION_DROPDOWN_VALUE_CHANGED($event)\">\n          <dxo-drop-down-options title=\"Organizations\" i18n-title=\"@@FieldCaption-Organizations\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\" width=\"360px\"></dxo-drop-down-options>\n          <div *dxTemplate=\"let data of 'content'\">\n            <dx-data-grid [focusedRowKey]=\"componentsService.SELECTED_ORGANIZATION_ID\" class=\"lookup-select-datagrid\" [dataSource]=\"componentsService.ORGANIZATIONS_DATASOURCE\" [hoverStateEnabled]=\"true\" height=\"100%\" (onSelectionChanged)=\"componentsService.ORGANIZATION_DROPDOWN_SELECTION_CHANGED($event)\" (onRowClick)=\"componentsService.ORGANIZATION_DROPDOWN_OPENED = false\">\n              <dxo-search-panel [visible]=\"true\" width=\"260px\" [highlightSearchText]=\"true\" [searchVisibleColumnsOnly]=\"false\" i18n-placeholder=\"@@Placeholder-Search\" placeholder=\"Search...\"></dxo-search-panel>     \n              <dxi-column dataField=\"OrganizationId\" [allowSearch]=\"false\" i18n-caption=\"@@GridColumn-Id\" caption=\"Id\" [visible]=\"false\"></dxi-column>\n              <dxi-column dataField=\"AccountNumber\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-AccountNumber\" caption=\"Account no.\" width=\"100px\"></dxi-column>\n              <dxi-column dataField=\"Name\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n              <dxo-selection mode=\"single\"></dxo-selection>\n              <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n              <dxo-scrolling mode=\"virtual\"></dxo-scrolling>\n              <dxo-paging [enabled]=\"true\" [pageSize]=\"20\"></dxo-paging>\n            </dx-data-grid>\n          </div>          \n        </dx-drop-down-box>\n      </div>\n\n      <div class=\"customer-select-container\" *ngIf=\"(componentsService.IS_MASTER_USER || componentsService.IS_MASTER_ADMIN || componentsService.IS_ORGANIZATION_USER || componentsService.IS_EMPLOYEE_USER) && (coreService.require_Organization && coreService.require_Customer)\">\n        <ng-container [ngTemplateOutlet]=\"customerSelectorTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"customerSelectorTemplate\">\n        </ng-container> \n\n        <dx-drop-down-box *ngIf=\"!customerSelectorTemplate\" stylingMode=\"outlined\" width=\"260px\" placeholder=\"Select Customer\" [showClearButton]=\"true\" [dataSource]=\"componentsService.CUSTOMERS_DATASOURCE\" [(value)]=\"componentsService.SELECTED_CUSTOMER_ID\" valueExpr=\"Id\" displayExpr=\"Name\" [(opened)]=\"componentsService.CUSTOMER_DROPDOWN_OPENED\" (onValueChanged)=\"componentsService.CUSTOMER_DROPDOWN_VALUE_CHANGED($event)\">\n          <dxo-drop-down-options title=\"Customers\" i18n-title=\"@@FieldCaption-Customers\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\" width=\"360px\"></dxo-drop-down-options>\n          <div *dxTemplate=\"let data of 'content'\">\n            <dx-data-grid [focusedRowKey]=\"componentsService.SELECTED_CUSTOMER_ID\" class=\"lookup-select-datagrid\" [dataSource]=\"componentsService.CUSTOMERS_DATASOURCE\" [hoverStateEnabled]=\"true\" height=\"100%\" (onSelectionChanged)=\"componentsService.CUSTOMER_DROPDOWN_SELECTION_CHANGED($event)\" (onRowClick)=\"componentsService.CUSTOMER_DROPDOWN_OPENED = false\">\n              <dxo-search-panel [visible]=\"true\" width=\"260px\" [highlightSearchText]=\"true\" [searchVisibleColumnsOnly]=\"false\" i18n-placeholder=\"@@Placeholder-Search\" placeholder=\"Search...\"></dxo-search-panel>     \n              <dxi-column dataField=\"Id\" [allowSearch]=\"false\" i18n-caption=\"@@GridColumn-Id\" caption=\"Id\" [visible]=\"false\"></dxi-column>\n              <dxi-column dataField=\"AccountNumber\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-AccountNumber\" caption=\"Account no.\" width=\"100px\"></dxi-column>\n              <dxi-column dataField=\"Name\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n              <dxo-selection mode=\"single\"></dxo-selection>\n              <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n              <dxo-scrolling mode=\"virtual\"></dxo-scrolling>\n              <dxo-paging [enabled]=\"true\" [pageSize]=\"20\"></dxo-paging>\n            </dx-data-grid>\n          </div>          \n        </dx-drop-down-box>\n      </div>      \n     \n      <div class=\"vendor-select-container\" *ngIf=\"(componentsService.IS_MASTER_USER || componentsService.IS_MASTER_ADMIN || componentsService.IS_ORGANIZATION_USER || componentsService.IS_EMPLOYEE_USER) && (coreService.require_Organization && coreService.require_Vendor)\">\n        <ng-container [ngTemplateOutlet]=\"vendorSelectorTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"vendorSelectorTemplate\">\n        </ng-container> \n\n        <dx-drop-down-box *ngIf=\"!vendorSelectorTemplate\" stylingMode=\"outlined\" width=\"260px\" placeholder=\"Select Vendor\" [showClearButton]=\"true\" [dataSource]=\"componentsService.VENDORS_DATASOURCE\" [(value)]=\"componentsService.SELECTED_VENDOR_ID\" valueExpr=\"Id\" displayExpr=\"Name\" [(opened)]=\"componentsService.VENDOR_DROPDOWN_OPENED\" (onValueChanged)=\"componentsService.VENDOR_DROPDOWN_VALUE_CHANGED($event)\">\n          <dxo-drop-down-options title=\"Vendors\" i18n-title=\"@@FieldCaption-Vendors\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\" width=\"360px\"></dxo-drop-down-options>\n          <div *dxTemplate=\"let data of 'content'\">\n            <dx-data-grid [focusedRowKey]=\"componentsService.SELECTED_VENDOR_ID\" class=\"lookup-select-datagrid\" [dataSource]=\"componentsService.VENDORS_DATASOURCE\" [hoverStateEnabled]=\"true\" height=\"100%\" (onSelectionChanged)=\"componentsService.VENDOR_DROPDOWN_SELECTION_CHANGED($event)\" (onRowClick)=\"componentsService.VENDOR_DROPDOWN_OPENED = false\">\n              <dxo-search-panel [visible]=\"true\" width=\"260px\" [highlightSearchText]=\"true\" [searchVisibleColumnsOnly]=\"false\" i18n-placeholder=\"@@Placeholder-Search\" placeholder=\"Search...\"></dxo-search-panel>     \n              <dxi-column dataField=\"Id\" [allowSearch]=\"false\" i18n-caption=\"@@GridColumn-Id\" caption=\"Id\" [visible]=\"false\"></dxi-column>\n              <dxi-column dataField=\"VendorId\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-VendorId\" caption=\"Vendor id\" width=\"100px\"></dxi-column>\n              <dxi-column dataField=\"Name\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n              <dxo-selection mode=\"single\"></dxo-selection>\n              <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n              <dxo-scrolling mode=\"virtual\"></dxo-scrolling>\n              <dxo-paging [enabled]=\"true\" [pageSize]=\"20\"></dxo-paging>\n            </dx-data-grid>\n          </div>          \n        </dx-drop-down-box>\n      </div>  \n\n      <span class=\"toolbar-divider\"></span>      \n          \n      <ng-container *ngIf=\"toolbarItems\">            \n        <ng-container *ngFor=\"let toolbarItem of toolbarItems\">\n            <button *ngIf=\"(toolbarItem.itemtype===undefined) || toolbarItem.itemtype=='' || toolbarItem.itemtype=='button'\" aria-label=\"Button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" [state]=\"toolbarItem.linkstate\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" [class]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button ' + toolbarItem.cssClass) : 'menu-toolbar-button'\" matTooltip=\"{{toolbarItem.caption}}\">\n              <div class=\"menu-toolbar-button-content\">\n                <svg-icon [name]=\"toolbarItem.svg\" [svgClass]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button-icon ' + toolbarItem.cssClass_Icon) : 'menu-toolbar-button-icon'\"></svg-icon>\n              </div>            \n            </button>   \n            <button *ngIf=\"toolbarItem.itemtype=='round_button'\" aria-label=\"Button\" mat-fab appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" [state]=\"toolbarItem.linkstate\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" [class]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button ' + toolbarItem.cssClass) : 'menu-toolbar-button'\" matTooltip=\"{{toolbarItem.caption}}\">\n              <div class=\"menu-toolbar-button-content\">\n                <svg-icon [name]=\"toolbarItem.svg\" [svgClass]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button-icon ' + toolbarItem.cssClass_Icon) : 'menu-toolbar-button-icon'\"></svg-icon>\n              </div>            \n            </button>                                      \n        </ng-container>\n        <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n      </ng-container>\n\n      <ng-container [ngTemplateOutlet]=\"profileMenuTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"profileMenuTemplate\">\n      </ng-container> \n      \n      <div class=\"menu-toolbar-profile-container\" *ngIf=\"!profileMenuTemplate\">\n        <button mat-raised-button *ngIf=\"componentsService.USERNAME\"  [matMenuTriggerFor]=\"profileMenu\" appMaterialElevation [matTooltip]=\"componentsService.USER_FULLNAME\" aria-label=\"Profile\" i18n-aria-label=\"@@Action-Profile\" class=\"menu-toolbar-button menu-toolbar-button-profile\">\n          <!-- <svg-icon name=\"mobicloud_profile\" svgClass=\"menu-toolbar-button-icon menu-toolbar-button-icon-small\"></svg-icon> -->\n          <div class=\"menu-toolbar-button-content menu-toolbar-button-content-user\">\n            <img alt=\"\"alt=\"\" [src]=\"componentsService.USER_IMAGEURL\" class=\"menu-toolbar-button-profileImage\">\n            <div class=\"profile-text-container\">\n              <div class=\"profile-text-accountname\">{{componentsService.USER_ORGANIZATION_NAME}}</div>\n              <div class=\"profile-text-accountdetails\">\n                <div class=\"profile-text-accountnumber\">{{componentsService.USER_ORGANIZATION_ACCOUNTNUM}}</div>\n                <div class=\"profile-text-username\">\n                  <svg-icon name=\"mobicloud_employee\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_EMPLOYEE_USER && !componentsService.IS_EMPLOYEE_MASTER_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_system_user\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_ORGANIZATION_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_customer\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_CUSTOMER_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_vendor\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_VENDOR_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_master_user\" svgClass=\"username-icon username-icon-master\" *ngIf=\"componentsService.IS_MASTER_USER && !componentsService.IS_MASTER_ADMIN\"></svg-icon>\n                  <svg-icon name=\"mobicloud_master_admin\" svgClass=\"username-icon username-icon-master\" *ngIf=\"componentsService.IS_MASTER_ADMIN\"></svg-icon>\n                  <span [ngClass]=\"{'username-label-admin':(componentsService.IS_ORGANIZATION_ADMIN || componentsService.IS_MASTER_ADMIN), 'username-label':!(componentsService.IS_ORGANIZATION_ADMIN || componentsService.IS_MASTER_ADMIN)}\">{{componentsService.USERNAME}}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"profile-expand-container\">\n              <svg-icon name=\"mobicloud_expand\" svgClass=\"expand-icon\"></svg-icon>\n            </div>\n          </div>\n        </button>  \n      </div>\n\n      <mat-menu #profileMenu class=\"profileMenu\">\n        <button aria-label=\"language\" mat-menu-item [matMenuTriggerFor]=\"languages\">\n          <mat-icon svgIcon=\"mobicloud_language\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-Language\" class=\"menu-item-text\">Language</span><span class=\"menu-item-text\"> ({{componentsService.CURRENT_LANGUAGE_NAME}})</span>\n        </button>              \n       \n        <button aria-label=\"profile\" mat-menu-item routerLink=\"/management/profile\" *ngIf=\"(!componentsService.IS_MASTER_USER && !componentsService.IS_MASTER_ADMIN)\" [disabled]=\"!componentsService.ENABLE_MYPROFILE\">\n          <mat-icon svgIcon=\"mobicloud_myprofile\"  [ngClass]=\"{'menu-item-icon':componentsService.ENABLE_MYPROFILE, 'menu-item-icon-disabled':!componentsService.ENABLE_MYPROFILE}\"></mat-icon>\n          <span i18n=\"@@Button-MyProfile\" [ngClass]=\"{'menu-item-text':componentsService.ENABLE_MYPROFILE, 'menu-item-text-disabled':!componentsService.ENABLE_MYPROFILE}\">My profile</span>\n        </button>\n        \n        <button aria-label=\"signout\" mat-menu-item (click)=\"signout()\">\n          <mat-icon svgIcon=\"mobicloud_logout\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-SignOut\" class=\"menu-item-text\">Sign out</span>\n        </button>\n        <button aria-label=\"default theme\" mat-menu-item (click)=\"displayVersion()\">\n          <mat-icon svgIcon=\"mobicloud_theme_default\" class=\"menu-item-icon\"></mat-icon>\n          <span class=\"menu-item-text\">{{coreService._appTitle ?? coreService._appName}} v{{coreService._appVersion}}</span>\n        </button>\n      </mat-menu>\n\n      <mat-menu #languages>\n        <button aria-label=\"supported languages\" mat-menu-item *ngFor=\"let language of componentsService.SUPPORTED_LANGUAGES\" [disabled]=\"componentsService.CURRENT_LOCALE_ID == language.LocaleId\" (click)=\"componentsService.CHANGE_LANGUAGE(language.LocaleId)\">\n          <div class=\"flex_div\">\n            <img alt=\"\"alt=\"\" class=\"language-icon\" src=\"./assets/languages/language_{{language.FlagCode | lowercase}}.png\">\n            <span class=\"language-text\" class=\"menu-item-text\">{{language.LanguageName}}</span>\n          </div>\n        </button>\n      </mat-menu>    \n      \n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <ng-container *ngIf=\"!showMainHeader && showMainSidebar\">\n      <button aria-label=\"toggle\" type=\"button\" aria-label=\"Toggle sidenav\" mat-icon-button (click)=\"drawer.toggle()\"\n        *ngIf=\"(isHandset$ | async)\">\n        <mat-icon aria-label=\"menu icon\">menu</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Add Content Here -->\n    <div class=\"sidenav-innercontent\">\n      <ng-content></ng-content>\n    </div>\n      \n  </mat-sidenav-content>\n</mat-sidenav-container>", styles: [".sidenav-container{background-color:var(--default-sidebarcontent-color-background)}.sidenav{width:240px;border-right:0px;background-color:var(--default-navmenu-color-background)}.mat-toolbar{position:sticky;position:-webkit-sticky;top:0;z-index:1000;height:80px;background-color:var(--default-navtoolbar-color-background)}.menu-toolbar-content{margin-top:20px;display:block;cursor:pointer}.menu-toolbar-content:focus{outline:0}.menu-toolbar-logo-container{height:35px}.menu-toolbar-logo-icon{width:193px;height:35px;fill:var(--default-menu-logo-color)}.toolbar-divider{flex:1 1 auto}.sidenav-innercontent{height:calc(100% - 94px);background-color:var(--default-sidebarcontent-color-background)}.menu-toolbar{background-color:var(--default-navtoolbar-color-background);height:80px}.toolbar-menu-button{padding:unset!important;margin-right:12px;height:24px!important;min-width:unset!important;width:24px!important}.toolbar-menu-button-outmenu{margin-top:22px!important}.toolbar-menu-button-icon{color:var(--default-toolbar-iconcolor);width:20px!important;height:20px!important;font-size:20px;margin-bottom:18px}.menu-toolbar-app-tittle-container{display:flex}.toolbar-menu-button-inmenu{width:22px;height:22px!important;min-width:unset!important;padding:0!important;margin:0!important}.toolbar-menu-button-inmenu .toolbar-menu-button-icon{margin-top:20px}.menu-toolbar-app-divider{flex:1 1 auto}.menu-toolbar-app-tittle-wrapper{width:100%;height:30px}.menu-toolbar-app-tittle{color:var(--default-menu-title-color);font-size:small;margin:0;padding:0;line-height:4mm;text-align:right;vertical-align:top;width:100%}.organization-select-container{margin-bottom:1px;margin-top:21px;margin-right:7px}::ng-deep .organization-select-container .dx-dropdowneditor-input-wrapper{border-radius:2px;background-color:var(--default-groupbox-header-iconbackground)!important;height:38px!important}::ng-deep .lookup-select-datagrid .dx-datagrid-header-panel .dx-toolbar .dx-texteditor{width:100%!important}::ng-deep .lookup-select-datagrid .dx-datagrid-header-panel .dx-toolbar .dx-toolbar-after{padding-left:0;width:100%!important}::ng-deep .lookup-select-datagrid .dx-datagrid-header-panel .dx-datagrid-search-panel{margin-left:0}.customer-select-container{margin-bottom:1px;margin-top:21px;margin-right:7px}::ng-deep .customer-select-container .dx-dropdowneditor-input-wrapper{border-radius:2px;background-color:var(--default-groupbox-header-iconbackground)!important;height:38px!important}.vendor-select-container{margin-bottom:1px;margin-top:21px}::ng-deep .vendor-select-container .dx-dropdowneditor-input-wrapper{border-radius:2px;background-color:var(--default-groupbox-header-iconbackground)!important;height:38px!important}.menu-toolbar-button{background-color:var(--default-groupbox-header-iconbackground)!important;width:38px;height:38px;min-width:unset!important;padding:unset!important;margin-right:8px!important;margin-top:20px}::ng-deep .menu-toolbar-button .mat-button-wrapper{height:100%;width:100%;padding:unset!important}.menu-toolbar-button-content{height:100%}.menu-toolbar-button-icon{pointer-events:none;fill:var(--default-groupbox-header-iconcolor);width:22px;height:22px;margin-top:0}.menu-toolbar-profile-container{height:100%;display:flex;padding:0}.menu-toolbar-button-content-user{display:flex;padding-left:6px}.menu-toolbar-button-profile{width:193px!important}.menu-toolbar-button-profileImage{width:24px!important;height:24px!important;border-radius:50%;margin-bottom:3px;margin-top:8px!important}.menu-toolbar-button-content .profile-text-container{text-align:left;margin-left:5px;width:134px!important;max-width:134px!important}.menu-toolbar-button-content .profile-expand-container{width:18px!important;display:grid;place-items:center}.menu-toolbar-button-content .profile-expand-container .expand-icon{fill:var(--default-groupbox-header-iconcolor);width:10px;height:10px;margin-right:2px}.menu-toolbar-button-content .profile-text-container .profile-text-accountname{font-size:smaller!important;font-weight:600;line-height:16px;margin-top:3px;height:16px!important;max-height:16px!important;max-width:134px!important;overflow:hidden;text-overflow:ellipsis}.menu-toolbar-button-content .profile-text-container .profile-text-accountdetails{display:flex;font-size:smaller!important;line-height:19px;max-height:19px!important;height:19px!important;max-width:134px!important;width:134px!important}.menu-toolbar-button-content .profile-text-container .profile-text-accountnumber{width:48px!important}.menu-toolbar-button-content .profile-text-container .profile-text-username{width:86px!important;max-width:86px!important;overflow:hidden;text-overflow:ellipsis;display:flex}.menu-toolbar-button-content .profile-text-container .profile-text-username .username-icon{fill:var(--default-groupbox-header-iconcolor);width:13px;height:13px;margin-right:2px;margin-top:3px}.menu-toolbar-button-content .profile-text-container .username-icon-master{fill:red!important}::ng-deep .mat-menu-content{background-color:var(--default-popup-background)!important}::ng-deep .mat-menu-item{background-color:var(--default-popup-background)!important;color:var(--default-popup-textcolor)!important}.username-label-admin{color:#7a0e71}.menu-item-icon{fill:var(--default-popup-iconcolor)}.menu-item-icon-disabled{fill:var(--default-navmenu1-buttoncolor-inactive)}.menu-item-text-disabled{color:var(--default-navmenu1-buttoncolor-inactive)}.language-icon{margin-right:10px;height:16px;width:32px;margin-top:5px}.flex_div{display:flex}.theme-icon{transform:scale(.6)}.theme-text{margin-top:4px}.mat-mdc-nav-list{margin:10px;background-color:transparent!important}::ng-deep .mat-mdc-list-item,::ng-deep .mdc-list-item__content,::ng-deep .mat-mdc-list-item-unscoped-content{padding:0!important;display:flex}.navitem-level1{background-color:var(--default-navmenu1-buttoncolor-inactive);margin-bottom:12px;border-radius:8px;height:48px}.navitem-level1 .mat-icon{transform:scale(.9);padding-left:16px}.navitem-level1 span{margin-left:6px;font-weight:600;font-size:medium;color:var(--default-navmenu1-textcolor-inactive)!important}.navitem-level1 mat-icon.active{fill:var(--default-navmenu1-iconcolor-active)}.navitem-level1 mat-icon.inactive{fill:var(--default-navmenu1-iconcolor-inactive)}a.navitem-level1-active{background-color:var(--default-navmenu1-buttoncolor-active)}a.navitem-level1-active span{color:var(--default-navmenu1-textcolor-active)!important}::ng-deep .mat-expansion-panel .mat-expansion-panel-header .mat-content .mat-expansion-panel-header-title .mat-icon{transform:scale(.8)}::ng-deep .mat-expansion-panel .mat-expansion-panel-header span{font-size:medium}.expansion-panel-level1{padding-bottom:10px!important}.expansion-panel-level1 .expansion-panel-header-level1,.expansion-panel-level1 .expansion-panel-header-level1:hover{background-color:var(--default-navmenu1-buttoncolor-inactive)!important;height:48px!important;margin:0;padding-left:16px!important}.expansion-panel-level1 .expansion-panel-header-level1 ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level1 .expansion-panel-header-level1 ::ng-deep .mat-expansion-panel-header-description,.expansion-panel-level1 .expansion-panel-header-level1:hover ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level1 .expansion-panel-header-level1:hover ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu1-textcolor-inactive)!important}.expansion-panel-level1 .expansion-panel-header-level1-active{background-color:var(--default-navmenu1-buttoncolor-active)!important;height:48px!important;margin:0;padding-left:16px!important}.expansion-panel-level1 .expansion-panel-header-level1-active ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level1 .expansion-panel-header-level1-active ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu1-textcolor-active)!important}.expansion-panel-level1 ::ng-deep .mat-expansion-panel-body{margin-left:16px;margin-top:6px;margin-bottom:10px;padding-top:0;padding-left:4px!important;padding-right:0!important;padding-bottom:0!important;border-left:var(--default-navmenu1-border-treeline) 1px solid}.expansion-panel-header-title-level1,.expansion-panel-header-title-level1:hover{color:var(--default-navmenu1-textcolor-inactive)!important;font-weight:600}.expansion-panel-header-title-level1 span,.expansion-panel-header-title-level1:hover span{margin-left:8px}.expansion-panel-header-title-level1-active,.expansion-panel-header-title-level1-active:hover{color:var(--default-navmenu1-textcolor-active)!important;font-weight:600}.expansion-panel-header-title-level1-active span,.expansion-panel-header-title-level1-active:hover span{margin-left:8px}.navitem-level2-flat{padding-left:4px!important;height:28px!important}.navitem-level2-flat span{font-size:small;font-weight:600;margin-left:2px!important}.navitem-level2-flat .mat-icon{transform:scale(.6)}a.navitem-level2-flat span{color:var(--default-navmenu2-textcolor-inactive)!important}a.navitem-level2-active-flat span{color:var(--default-navmenu2-textcolor-active)!important}.expansion-panel-level2 .expansion-panel-header-level2,.expansion-panel-level2 .expansion-panel-header-level2:hover{height:26px!important;margin:0;padding-left:2px!important}.expansion-panel-level2 .expansion-panel-header-level2 .mat-icon,.expansion-panel-level2 .expansion-panel-header-level2:hover .mat-icon{transform:scale(.7);fill:var(--default-navmenu2-iconcolor-inactive)}.expansion-panel-level2 .expansion-panel-header-level2 span,.expansion-panel-level2 .expansion-panel-header-level2:hover span{margin-left:8px;font-size:small;font-weight:600;color:var(--default-navmenu2-textcolor-inactive)!important}.expansion-panel-level2 .expansion-panel-header-level2 ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level2 .expansion-panel-header-level2 ::ng-deep .mat-expansion-panel-header-description,.expansion-panel-level2 .expansion-panel-header-level2:hover ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level2 .expansion-panel-header-level2:hover ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu2-textcolor-inactive)!important}.expansion-panel-level2 .expansion-panel-header-level2-active{height:26px!important;margin:0;padding-left:2px!important}.expansion-panel-level2 .expansion-panel-header-level2-active .mat-icon{transform:scale(.7);fill:var(--default-navmenu2-iconcolor-active)}.expansion-panel-level2 .expansion-panel-header-level2-active span{margin-left:8px;font-weight:600;font-size:small;color:var(--default-navmenu2-textcolor-active)!important}.expansion-panel-level2 .expansion-panel-header-level2-active ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level2 .expansion-panel-header-level2-active ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu1-textcolor-active)!important}.expansion-panel-level2 ::ng-deep .mat-expansion-panel-body{margin-left:16px;margin-top:0;padding-top:0;padding-left:0!important;padding-right:0!important;padding-bottom:0!important;border-left:0}.navitem-level3-flat{padding-left:4px!important;height:28px!important}.navitem-level3-flat span{font-size:small;font-weight:600;margin-left:2px!important}.navitem-level3-flat .mat-icon{transform:scale(.6)}a.navitem-level3-flat span{color:var(--default-navmenu2-textcolor-inactive)!important}a.navitem-level3-active-flat span{color:var(--default-navmenu2-textcolor-active)!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i6.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: i7.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i7.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i7.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i11.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i11.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i14.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i15.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i16.DxoDropDownOptionsComponent, selector: "dxo-drop-down-options", inputs: ["accessKey", "animation", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr", "hideEvent", "showEvent", "target"], outputs: ["heightChange", "positionChange", "visibleChange", "widthChange"] }, { kind: "component", type: i17.DxDropDownBoxComponent, selector: "dx-drop-down-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "contentTemplate", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValueFormatter", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "label", "labelMode", "maxLength", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "contentTemplateChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueFormatterChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "labelChange", "labelModeChange", "maxLengthChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i16.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i18.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i16.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "sensitivity", "showCheckBoxesMode"] }, { kind: "component", type: i16.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i16.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i16.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i16.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "directive", type: i19.MaterialElevationDirective, selector: "[appMaterialElevation]", inputs: ["defaultElevation", "raisedElevation"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MainNavComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mobicloud-main-nav', template: "<mat-sidenav-container class=\"sidenav-container\" fullscreen>\n\n  <mat-sidenav #drawer class=\"sidenav\" fixedInViewport [attr.role]=\"(isHandset$ | async) ? 'dialog' : 'navigation'\"\n    [mode]=\"(isHandset$ | async) ? 'over' : 'side'\" [opened]=\"((isHandset$ | async) === false) && showMainSidebar\" (openedChange)=\"openedChangeSidenav($event)\">\n\n    <mat-toolbar class=\"menu-toolbar\">\n      <mat-toolbar-row>\n        <div class=\"menu-toolbar-content\">\n          <div class=\"menu-toolbar-logo-container\" routerLink=\"/\">\n            <ng-container [ngTemplateOutlet]=\"appLogoTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"appLogoTemplate\"></ng-container>\n            <svg-icon *ngIf=\"!appLogoTemplate\" name=\"mobicloud_logo\" class=\"menu-toolbar-logo-icon\"></svg-icon>\n          </div>          \n          <div class=\"menu-toolbar-app-tittle-container\">\n            <div class=\"menu-toolbar-app-burgermenu\">\n              <button type=\"button\" class=\"toolbar-menu-button toolbar-menu-button-inmenu\" aria-label=\"Toggle sidenav\"  mat-button (click)=\"drawer.toggle()\" matTooltip=\"Hide menu\" *ngIf=\"showMainSidebar\">\n                <mat-icon aria-label=\"menu icon\" class=\"toolbar-menu-button-icon\">menu</mat-icon>\n              </button> \n            </div>\n            <span class=\"menu-toolbar-app-divider\"></span>            \n                        \n            <div class=\"menu-toolbar-app-tittle-wrapper\">\n              <ng-container [ngTemplateOutlet]=\"appTitleTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"appTitleTemplate\"></ng-container>              \n              <div *ngIf=\"!appTitleTemplate\" class=\"menu-toolbar-app-tittle\">{{title}}</div>\n            </div>\n          </div>\n      </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <mat-nav-list>\n      <ng-container *ngFor=\"let menuNode1 of menuNodes\">\n          <ng-container *ngIf=\"!menuNode1.children; else hasChildren1\">\n          <!-- LEVEL 1 FLAT -->\n          <a mat-list-item [routerLink]=\"menuNode1.link\" [state]=\"menuNode1.linkstate\" class=\"navitem-level1\" [routerLinkActive]=\"['navitem-level1-active']\" routerLinkActive #rla1_flat=\"routerLinkActive\">\n            <mat-icon svgIcon=\"{{menuNode1.svg}}\" [ngClass]=\"{'inactive': !rla1_flat.isActive,'active': rla1_flat.isActive}\"></mat-icon>\n            <span>{{ menuNode1.caption }}</span>\n          </a>\n        </ng-container>\n        <ng-template #hasChildren1>\n          <!-- LEVEL 1 EXPAND -->\n          <mat-expansion-panel class=\"mat-elevation-z0 expansion-panel-level1\" routerLinkActive #rla1_expand=\"routerLinkActive\" [expanded]=\"rla1_expand.isActive\" [@.disabled]=\"true\">\n            <!-- <mat-expansion-panel class=\"mat-elevation-z0 expansion-panel-level1\" routerLinkActive #rla1_expand=\"routerLinkActive\" [expanded]=\"true\">    -->\n            <mat-expansion-panel-header [ngClass]=\"{'expansion-panel-header-level1': !rla1_expand.isActive,'expansion-panel-header-level1-active': rla1_expand.isActive}\">       \n              <mat-panel-title [ngClass]=\"{'expansion-panel-header-title-level1': !rla1_expand.isActive, 'expansion-panel-header-title-level1-active': rla1_expand.isActive}\">\n                <mat-icon svgIcon=\"{{menuNode1.svg}}\" [ngClass]=\"{'inactive': !rla1_expand.isActive,'active': rla1_expand.isActive}\"></mat-icon>\n                <span>{{ menuNode1.caption }}</span>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <ng-container *ngFor=\"let menuNode2 of menuNode1.children\">\n              <!-- LEVEL 2 -->\n              <ng-container *ngIf=\"!menuNode2.children; else hasChildren2\">\n                <!-- LEVEL 2 FLAT -->\n                <a mat-list-item [routerLink]=\"menuNode2.link\" [state]=\"menuNode2.linkstate\" class=\"navitem-level2-flat\" [routerLinkActive]=\"['navitem-level2-active-flat']\" routerLinkActive #rla2_flat=\"routerLinkActive\">\n                  <mat-icon svgIcon=\"{{menuNode2.svg}}\" [ngClass]=\"{'inactive': !rla2_flat.isActive,'active': rla2_flat.isActive}\"></mat-icon>\n                  <span>{{ menuNode2.caption }}</span>\n                </a>                \n              </ng-container>\n              <ng-template #hasChildren2>\n                <!-- LEVEL 2 EXPAND -->\n                <mat-expansion-panel class=\"mat-elevation-z0 expansion-panel-level2\" routerLinkActive #rla2_expand=\"routerLinkActive\" [expanded]=\"rla2_expand.isActive\" [@.disabled]=\"true\">        \n                  <mat-expansion-panel-header [ngClass]=\"{'expansion-panel-header-level2': !rla2_expand.isActive,'expansion-panel-header-level2-active': rla2_expand.isActive}\">       \n                    <mat-panel-title [ngClass]=\"{'expansion-panel-header-title-level2': !rla2_expand.isActive, 'expansion-panel-header-title-level2-active': rla2_expand.isActive}\">\n                      <mat-icon svgIcon=\"{{menuNode2.svg}}\" [ngClass]=\"{'inactive': !rla2_expand.isActive,'active': rla2_expand.isActive}\"></mat-icon>\n                      <span>{{ menuNode2.caption }}</span>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <ng-container *ngFor=\"let menuNode3 of menuNode2.children\">\n                    <!-- LEVEL 3 FLAT -->\n                    <a mat-list-item [routerLink]=\"menuNode3.link\" [state]=\"menuNode3.linkstate\" class=\"navitem-level3-flat\" [routerLinkActive]=\"['navitem-level3-active-flat']\" routerLinkActive #rla3_flat=\"routerLinkActive\">\n                      <mat-icon svgIcon=\"{{menuNode3.svg}}\" [ngClass]=\"{'inactive': !rla3_flat.isActive,'active': rla3_flat.isActive}\"></mat-icon>\n                      <span>{{ menuNode3.caption }}</span>\n                    </a>\n                  </ng-container>\n                </mat-expansion-panel>                \n              </ng-template>\n            </ng-container>\n          </mat-expansion-panel>                      \n        </ng-template>\n      </ng-container> \n\n    </mat-nav-list>\n\n  </mat-sidenav>\n\n  <!-- *ngIf=\"showMainSidebar\" -->\n\n  <mat-sidenav-content class=\"sidenav-maincontent\">\n    <mat-toolbar *ngIf=\"showMainHeader\">\n      <mat-toolbar-row>\n      <!-- <button type=\"button\" aria-label=\"Toggle sidenav\" mat-icon-button (click)=\"drawer.toggle()\"\n        *ngIf=\"(isHandset$ | async) && showMainSidebar\">\n        <mat-icon aria-label=\"menu icon\" class=\"toolbar-menu-button-icon\">menu</mat-icon>\n      </button>      -->\n      <button type=\"button\" class=\"toolbar-menu-button toolbar-menu-button-outmenu\" aria-label=\"Toggle sidenav\" mat-button (click)=\"drawer.toggle()\" matTooltip=\"Open menu\" *ngIf=\"showMainSidebar && !sidebarOpened\">\n        <mat-icon aria-label=\"menu icon\" class=\"toolbar-menu-button-icon\">menu</mat-icon>\n      </button>        \n\n      <div class=\"organization-select-container\" *ngIf=\"((componentsService.IS_MASTER_USER || componentsService.IS_MASTER_ADMIN) || (componentsService.ALLOW_SUBORGANIZATIONS)) && coreService.require_Organization\">\n        <ng-container [ngTemplateOutlet]=\"organizationSelectorTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"organizationSelectorTemplate\">\n        </ng-container> \n        \n        \n        <dx-drop-down-box *ngIf=\"!organizationSelectorTemplate\" stylingMode=\"outlined\" width=\"260px\" placeholder=\"Select Organization\" [showClearButton]=\"true\" [dataSource]=\"componentsService.ORGANIZATIONS_DATASOURCE\" [(value)]=\"componentsService.SELECTED_ORGANIZATION_ID\" valueExpr=\"OrganizationId\" displayExpr=\"Name\" [(opened)]=\"componentsService.ORGANIZATION_DROPDOWN_OPENED\" (onValueChanged)=\"componentsService.ORGANIZATION_DROPDOWN_VALUE_CHANGED($event)\">\n          <dxo-drop-down-options title=\"Organizations\" i18n-title=\"@@FieldCaption-Organizations\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\" width=\"360px\"></dxo-drop-down-options>\n          <div *dxTemplate=\"let data of 'content'\">\n            <dx-data-grid [focusedRowKey]=\"componentsService.SELECTED_ORGANIZATION_ID\" class=\"lookup-select-datagrid\" [dataSource]=\"componentsService.ORGANIZATIONS_DATASOURCE\" [hoverStateEnabled]=\"true\" height=\"100%\" (onSelectionChanged)=\"componentsService.ORGANIZATION_DROPDOWN_SELECTION_CHANGED($event)\" (onRowClick)=\"componentsService.ORGANIZATION_DROPDOWN_OPENED = false\">\n              <dxo-search-panel [visible]=\"true\" width=\"260px\" [highlightSearchText]=\"true\" [searchVisibleColumnsOnly]=\"false\" i18n-placeholder=\"@@Placeholder-Search\" placeholder=\"Search...\"></dxo-search-panel>     \n              <dxi-column dataField=\"OrganizationId\" [allowSearch]=\"false\" i18n-caption=\"@@GridColumn-Id\" caption=\"Id\" [visible]=\"false\"></dxi-column>\n              <dxi-column dataField=\"AccountNumber\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-AccountNumber\" caption=\"Account no.\" width=\"100px\"></dxi-column>\n              <dxi-column dataField=\"Name\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n              <dxo-selection mode=\"single\"></dxo-selection>\n              <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n              <dxo-scrolling mode=\"virtual\"></dxo-scrolling>\n              <dxo-paging [enabled]=\"true\" [pageSize]=\"20\"></dxo-paging>\n            </dx-data-grid>\n          </div>          \n        </dx-drop-down-box>\n      </div>\n\n      <div class=\"customer-select-container\" *ngIf=\"(componentsService.IS_MASTER_USER || componentsService.IS_MASTER_ADMIN || componentsService.IS_ORGANIZATION_USER || componentsService.IS_EMPLOYEE_USER) && (coreService.require_Organization && coreService.require_Customer)\">\n        <ng-container [ngTemplateOutlet]=\"customerSelectorTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"customerSelectorTemplate\">\n        </ng-container> \n\n        <dx-drop-down-box *ngIf=\"!customerSelectorTemplate\" stylingMode=\"outlined\" width=\"260px\" placeholder=\"Select Customer\" [showClearButton]=\"true\" [dataSource]=\"componentsService.CUSTOMERS_DATASOURCE\" [(value)]=\"componentsService.SELECTED_CUSTOMER_ID\" valueExpr=\"Id\" displayExpr=\"Name\" [(opened)]=\"componentsService.CUSTOMER_DROPDOWN_OPENED\" (onValueChanged)=\"componentsService.CUSTOMER_DROPDOWN_VALUE_CHANGED($event)\">\n          <dxo-drop-down-options title=\"Customers\" i18n-title=\"@@FieldCaption-Customers\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\" width=\"360px\"></dxo-drop-down-options>\n          <div *dxTemplate=\"let data of 'content'\">\n            <dx-data-grid [focusedRowKey]=\"componentsService.SELECTED_CUSTOMER_ID\" class=\"lookup-select-datagrid\" [dataSource]=\"componentsService.CUSTOMERS_DATASOURCE\" [hoverStateEnabled]=\"true\" height=\"100%\" (onSelectionChanged)=\"componentsService.CUSTOMER_DROPDOWN_SELECTION_CHANGED($event)\" (onRowClick)=\"componentsService.CUSTOMER_DROPDOWN_OPENED = false\">\n              <dxo-search-panel [visible]=\"true\" width=\"260px\" [highlightSearchText]=\"true\" [searchVisibleColumnsOnly]=\"false\" i18n-placeholder=\"@@Placeholder-Search\" placeholder=\"Search...\"></dxo-search-panel>     \n              <dxi-column dataField=\"Id\" [allowSearch]=\"false\" i18n-caption=\"@@GridColumn-Id\" caption=\"Id\" [visible]=\"false\"></dxi-column>\n              <dxi-column dataField=\"AccountNumber\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-AccountNumber\" caption=\"Account no.\" width=\"100px\"></dxi-column>\n              <dxi-column dataField=\"Name\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n              <dxo-selection mode=\"single\"></dxo-selection>\n              <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n              <dxo-scrolling mode=\"virtual\"></dxo-scrolling>\n              <dxo-paging [enabled]=\"true\" [pageSize]=\"20\"></dxo-paging>\n            </dx-data-grid>\n          </div>          \n        </dx-drop-down-box>\n      </div>      \n     \n      <div class=\"vendor-select-container\" *ngIf=\"(componentsService.IS_MASTER_USER || componentsService.IS_MASTER_ADMIN || componentsService.IS_ORGANIZATION_USER || componentsService.IS_EMPLOYEE_USER) && (coreService.require_Organization && coreService.require_Vendor)\">\n        <ng-container [ngTemplateOutlet]=\"vendorSelectorTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"vendorSelectorTemplate\">\n        </ng-container> \n\n        <dx-drop-down-box *ngIf=\"!vendorSelectorTemplate\" stylingMode=\"outlined\" width=\"260px\" placeholder=\"Select Vendor\" [showClearButton]=\"true\" [dataSource]=\"componentsService.VENDORS_DATASOURCE\" [(value)]=\"componentsService.SELECTED_VENDOR_ID\" valueExpr=\"Id\" displayExpr=\"Name\" [(opened)]=\"componentsService.VENDOR_DROPDOWN_OPENED\" (onValueChanged)=\"componentsService.VENDOR_DROPDOWN_VALUE_CHANGED($event)\">\n          <dxo-drop-down-options title=\"Vendors\" i18n-title=\"@@FieldCaption-Vendors\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\" width=\"360px\"></dxo-drop-down-options>\n          <div *dxTemplate=\"let data of 'content'\">\n            <dx-data-grid [focusedRowKey]=\"componentsService.SELECTED_VENDOR_ID\" class=\"lookup-select-datagrid\" [dataSource]=\"componentsService.VENDORS_DATASOURCE\" [hoverStateEnabled]=\"true\" height=\"100%\" (onSelectionChanged)=\"componentsService.VENDOR_DROPDOWN_SELECTION_CHANGED($event)\" (onRowClick)=\"componentsService.VENDOR_DROPDOWN_OPENED = false\">\n              <dxo-search-panel [visible]=\"true\" width=\"260px\" [highlightSearchText]=\"true\" [searchVisibleColumnsOnly]=\"false\" i18n-placeholder=\"@@Placeholder-Search\" placeholder=\"Search...\"></dxo-search-panel>     \n              <dxi-column dataField=\"Id\" [allowSearch]=\"false\" i18n-caption=\"@@GridColumn-Id\" caption=\"Id\" [visible]=\"false\"></dxi-column>\n              <dxi-column dataField=\"VendorId\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-VendorId\" caption=\"Vendor id\" width=\"100px\"></dxi-column>\n              <dxi-column dataField=\"Name\" [allowSearch]=\"true\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n              <dxo-selection mode=\"single\"></dxo-selection>\n              <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n              <dxo-scrolling mode=\"virtual\"></dxo-scrolling>\n              <dxo-paging [enabled]=\"true\" [pageSize]=\"20\"></dxo-paging>\n            </dx-data-grid>\n          </div>          \n        </dx-drop-down-box>\n      </div>  \n\n      <span class=\"toolbar-divider\"></span>      \n          \n      <ng-container *ngIf=\"toolbarItems\">            \n        <ng-container *ngFor=\"let toolbarItem of toolbarItems\">\n            <button *ngIf=\"(toolbarItem.itemtype===undefined) || toolbarItem.itemtype=='' || toolbarItem.itemtype=='button'\" aria-label=\"Button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" [state]=\"toolbarItem.linkstate\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" [class]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button ' + toolbarItem.cssClass) : 'menu-toolbar-button'\" matTooltip=\"{{toolbarItem.caption}}\">\n              <div class=\"menu-toolbar-button-content\">\n                <svg-icon [name]=\"toolbarItem.svg\" [svgClass]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button-icon ' + toolbarItem.cssClass_Icon) : 'menu-toolbar-button-icon'\"></svg-icon>\n              </div>            \n            </button>   \n            <button *ngIf=\"toolbarItem.itemtype=='round_button'\" aria-label=\"Button\" mat-fab appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" [state]=\"toolbarItem.linkstate\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" [class]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button ' + toolbarItem.cssClass) : 'menu-toolbar-button'\" matTooltip=\"{{toolbarItem.caption}}\">\n              <div class=\"menu-toolbar-button-content\">\n                <svg-icon [name]=\"toolbarItem.svg\" [svgClass]=\"toolbarItem.cssClass_Icon ? ('menu-toolbar-button-icon ' + toolbarItem.cssClass_Icon) : 'menu-toolbar-button-icon'\"></svg-icon>\n              </div>            \n            </button>                                      \n        </ng-container>\n        <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n      </ng-container>\n\n      <ng-container [ngTemplateOutlet]=\"profileMenuTemplate\" [ngTemplateOutletContext]=\"{data: {}}\" *ngIf=\"profileMenuTemplate\">\n      </ng-container> \n      \n      <div class=\"menu-toolbar-profile-container\" *ngIf=\"!profileMenuTemplate\">\n        <button mat-raised-button *ngIf=\"componentsService.USERNAME\"  [matMenuTriggerFor]=\"profileMenu\" appMaterialElevation [matTooltip]=\"componentsService.USER_FULLNAME\" aria-label=\"Profile\" i18n-aria-label=\"@@Action-Profile\" class=\"menu-toolbar-button menu-toolbar-button-profile\">\n          <!-- <svg-icon name=\"mobicloud_profile\" svgClass=\"menu-toolbar-button-icon menu-toolbar-button-icon-small\"></svg-icon> -->\n          <div class=\"menu-toolbar-button-content menu-toolbar-button-content-user\">\n            <img alt=\"\"alt=\"\" [src]=\"componentsService.USER_IMAGEURL\" class=\"menu-toolbar-button-profileImage\">\n            <div class=\"profile-text-container\">\n              <div class=\"profile-text-accountname\">{{componentsService.USER_ORGANIZATION_NAME}}</div>\n              <div class=\"profile-text-accountdetails\">\n                <div class=\"profile-text-accountnumber\">{{componentsService.USER_ORGANIZATION_ACCOUNTNUM}}</div>\n                <div class=\"profile-text-username\">\n                  <svg-icon name=\"mobicloud_employee\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_EMPLOYEE_USER && !componentsService.IS_EMPLOYEE_MASTER_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_system_user\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_ORGANIZATION_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_customer\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_CUSTOMER_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_vendor\" svgClass=\"username-icon\" *ngIf=\"componentsService.IS_VENDOR_USER\"></svg-icon>\n                  <svg-icon name=\"mobicloud_master_user\" svgClass=\"username-icon username-icon-master\" *ngIf=\"componentsService.IS_MASTER_USER && !componentsService.IS_MASTER_ADMIN\"></svg-icon>\n                  <svg-icon name=\"mobicloud_master_admin\" svgClass=\"username-icon username-icon-master\" *ngIf=\"componentsService.IS_MASTER_ADMIN\"></svg-icon>\n                  <span [ngClass]=\"{'username-label-admin':(componentsService.IS_ORGANIZATION_ADMIN || componentsService.IS_MASTER_ADMIN), 'username-label':!(componentsService.IS_ORGANIZATION_ADMIN || componentsService.IS_MASTER_ADMIN)}\">{{componentsService.USERNAME}}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"profile-expand-container\">\n              <svg-icon name=\"mobicloud_expand\" svgClass=\"expand-icon\"></svg-icon>\n            </div>\n          </div>\n        </button>  \n      </div>\n\n      <mat-menu #profileMenu class=\"profileMenu\">\n        <button aria-label=\"language\" mat-menu-item [matMenuTriggerFor]=\"languages\">\n          <mat-icon svgIcon=\"mobicloud_language\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-Language\" class=\"menu-item-text\">Language</span><span class=\"menu-item-text\"> ({{componentsService.CURRENT_LANGUAGE_NAME}})</span>\n        </button>              \n       \n        <button aria-label=\"profile\" mat-menu-item routerLink=\"/management/profile\" *ngIf=\"(!componentsService.IS_MASTER_USER && !componentsService.IS_MASTER_ADMIN)\" [disabled]=\"!componentsService.ENABLE_MYPROFILE\">\n          <mat-icon svgIcon=\"mobicloud_myprofile\"  [ngClass]=\"{'menu-item-icon':componentsService.ENABLE_MYPROFILE, 'menu-item-icon-disabled':!componentsService.ENABLE_MYPROFILE}\"></mat-icon>\n          <span i18n=\"@@Button-MyProfile\" [ngClass]=\"{'menu-item-text':componentsService.ENABLE_MYPROFILE, 'menu-item-text-disabled':!componentsService.ENABLE_MYPROFILE}\">My profile</span>\n        </button>\n        \n        <button aria-label=\"signout\" mat-menu-item (click)=\"signout()\">\n          <mat-icon svgIcon=\"mobicloud_logout\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-SignOut\" class=\"menu-item-text\">Sign out</span>\n        </button>\n        <button aria-label=\"default theme\" mat-menu-item (click)=\"displayVersion()\">\n          <mat-icon svgIcon=\"mobicloud_theme_default\" class=\"menu-item-icon\"></mat-icon>\n          <span class=\"menu-item-text\">{{coreService._appTitle ?? coreService._appName}} v{{coreService._appVersion}}</span>\n        </button>\n      </mat-menu>\n\n      <mat-menu #languages>\n        <button aria-label=\"supported languages\" mat-menu-item *ngFor=\"let language of componentsService.SUPPORTED_LANGUAGES\" [disabled]=\"componentsService.CURRENT_LOCALE_ID == language.LocaleId\" (click)=\"componentsService.CHANGE_LANGUAGE(language.LocaleId)\">\n          <div class=\"flex_div\">\n            <img alt=\"\"alt=\"\" class=\"language-icon\" src=\"./assets/languages/language_{{language.FlagCode | lowercase}}.png\">\n            <span class=\"language-text\" class=\"menu-item-text\">{{language.LanguageName}}</span>\n          </div>\n        </button>\n      </mat-menu>    \n      \n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <ng-container *ngIf=\"!showMainHeader && showMainSidebar\">\n      <button aria-label=\"toggle\" type=\"button\" aria-label=\"Toggle sidenav\" mat-icon-button (click)=\"drawer.toggle()\"\n        *ngIf=\"(isHandset$ | async)\">\n        <mat-icon aria-label=\"menu icon\">menu</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Add Content Here -->\n    <div class=\"sidenav-innercontent\">\n      <ng-content></ng-content>\n    </div>\n      \n  </mat-sidenav-content>\n</mat-sidenav-container>", styles: [".sidenav-container{background-color:var(--default-sidebarcontent-color-background)}.sidenav{width:240px;border-right:0px;background-color:var(--default-navmenu-color-background)}.mat-toolbar{position:sticky;position:-webkit-sticky;top:0;z-index:1000;height:80px;background-color:var(--default-navtoolbar-color-background)}.menu-toolbar-content{margin-top:20px;display:block;cursor:pointer}.menu-toolbar-content:focus{outline:0}.menu-toolbar-logo-container{height:35px}.menu-toolbar-logo-icon{width:193px;height:35px;fill:var(--default-menu-logo-color)}.toolbar-divider{flex:1 1 auto}.sidenav-innercontent{height:calc(100% - 94px);background-color:var(--default-sidebarcontent-color-background)}.menu-toolbar{background-color:var(--default-navtoolbar-color-background);height:80px}.toolbar-menu-button{padding:unset!important;margin-right:12px;height:24px!important;min-width:unset!important;width:24px!important}.toolbar-menu-button-outmenu{margin-top:22px!important}.toolbar-menu-button-icon{color:var(--default-toolbar-iconcolor);width:20px!important;height:20px!important;font-size:20px;margin-bottom:18px}.menu-toolbar-app-tittle-container{display:flex}.toolbar-menu-button-inmenu{width:22px;height:22px!important;min-width:unset!important;padding:0!important;margin:0!important}.toolbar-menu-button-inmenu .toolbar-menu-button-icon{margin-top:20px}.menu-toolbar-app-divider{flex:1 1 auto}.menu-toolbar-app-tittle-wrapper{width:100%;height:30px}.menu-toolbar-app-tittle{color:var(--default-menu-title-color);font-size:small;margin:0;padding:0;line-height:4mm;text-align:right;vertical-align:top;width:100%}.organization-select-container{margin-bottom:1px;margin-top:21px;margin-right:7px}::ng-deep .organization-select-container .dx-dropdowneditor-input-wrapper{border-radius:2px;background-color:var(--default-groupbox-header-iconbackground)!important;height:38px!important}::ng-deep .lookup-select-datagrid .dx-datagrid-header-panel .dx-toolbar .dx-texteditor{width:100%!important}::ng-deep .lookup-select-datagrid .dx-datagrid-header-panel .dx-toolbar .dx-toolbar-after{padding-left:0;width:100%!important}::ng-deep .lookup-select-datagrid .dx-datagrid-header-panel .dx-datagrid-search-panel{margin-left:0}.customer-select-container{margin-bottom:1px;margin-top:21px;margin-right:7px}::ng-deep .customer-select-container .dx-dropdowneditor-input-wrapper{border-radius:2px;background-color:var(--default-groupbox-header-iconbackground)!important;height:38px!important}.vendor-select-container{margin-bottom:1px;margin-top:21px}::ng-deep .vendor-select-container .dx-dropdowneditor-input-wrapper{border-radius:2px;background-color:var(--default-groupbox-header-iconbackground)!important;height:38px!important}.menu-toolbar-button{background-color:var(--default-groupbox-header-iconbackground)!important;width:38px;height:38px;min-width:unset!important;padding:unset!important;margin-right:8px!important;margin-top:20px}::ng-deep .menu-toolbar-button .mat-button-wrapper{height:100%;width:100%;padding:unset!important}.menu-toolbar-button-content{height:100%}.menu-toolbar-button-icon{pointer-events:none;fill:var(--default-groupbox-header-iconcolor);width:22px;height:22px;margin-top:0}.menu-toolbar-profile-container{height:100%;display:flex;padding:0}.menu-toolbar-button-content-user{display:flex;padding-left:6px}.menu-toolbar-button-profile{width:193px!important}.menu-toolbar-button-profileImage{width:24px!important;height:24px!important;border-radius:50%;margin-bottom:3px;margin-top:8px!important}.menu-toolbar-button-content .profile-text-container{text-align:left;margin-left:5px;width:134px!important;max-width:134px!important}.menu-toolbar-button-content .profile-expand-container{width:18px!important;display:grid;place-items:center}.menu-toolbar-button-content .profile-expand-container .expand-icon{fill:var(--default-groupbox-header-iconcolor);width:10px;height:10px;margin-right:2px}.menu-toolbar-button-content .profile-text-container .profile-text-accountname{font-size:smaller!important;font-weight:600;line-height:16px;margin-top:3px;height:16px!important;max-height:16px!important;max-width:134px!important;overflow:hidden;text-overflow:ellipsis}.menu-toolbar-button-content .profile-text-container .profile-text-accountdetails{display:flex;font-size:smaller!important;line-height:19px;max-height:19px!important;height:19px!important;max-width:134px!important;width:134px!important}.menu-toolbar-button-content .profile-text-container .profile-text-accountnumber{width:48px!important}.menu-toolbar-button-content .profile-text-container .profile-text-username{width:86px!important;max-width:86px!important;overflow:hidden;text-overflow:ellipsis;display:flex}.menu-toolbar-button-content .profile-text-container .profile-text-username .username-icon{fill:var(--default-groupbox-header-iconcolor);width:13px;height:13px;margin-right:2px;margin-top:3px}.menu-toolbar-button-content .profile-text-container .username-icon-master{fill:red!important}::ng-deep .mat-menu-content{background-color:var(--default-popup-background)!important}::ng-deep .mat-menu-item{background-color:var(--default-popup-background)!important;color:var(--default-popup-textcolor)!important}.username-label-admin{color:#7a0e71}.menu-item-icon{fill:var(--default-popup-iconcolor)}.menu-item-icon-disabled{fill:var(--default-navmenu1-buttoncolor-inactive)}.menu-item-text-disabled{color:var(--default-navmenu1-buttoncolor-inactive)}.language-icon{margin-right:10px;height:16px;width:32px;margin-top:5px}.flex_div{display:flex}.theme-icon{transform:scale(.6)}.theme-text{margin-top:4px}.mat-mdc-nav-list{margin:10px;background-color:transparent!important}::ng-deep .mat-mdc-list-item,::ng-deep .mdc-list-item__content,::ng-deep .mat-mdc-list-item-unscoped-content{padding:0!important;display:flex}.navitem-level1{background-color:var(--default-navmenu1-buttoncolor-inactive);margin-bottom:12px;border-radius:8px;height:48px}.navitem-level1 .mat-icon{transform:scale(.9);padding-left:16px}.navitem-level1 span{margin-left:6px;font-weight:600;font-size:medium;color:var(--default-navmenu1-textcolor-inactive)!important}.navitem-level1 mat-icon.active{fill:var(--default-navmenu1-iconcolor-active)}.navitem-level1 mat-icon.inactive{fill:var(--default-navmenu1-iconcolor-inactive)}a.navitem-level1-active{background-color:var(--default-navmenu1-buttoncolor-active)}a.navitem-level1-active span{color:var(--default-navmenu1-textcolor-active)!important}::ng-deep .mat-expansion-panel .mat-expansion-panel-header .mat-content .mat-expansion-panel-header-title .mat-icon{transform:scale(.8)}::ng-deep .mat-expansion-panel .mat-expansion-panel-header span{font-size:medium}.expansion-panel-level1{padding-bottom:10px!important}.expansion-panel-level1 .expansion-panel-header-level1,.expansion-panel-level1 .expansion-panel-header-level1:hover{background-color:var(--default-navmenu1-buttoncolor-inactive)!important;height:48px!important;margin:0;padding-left:16px!important}.expansion-panel-level1 .expansion-panel-header-level1 ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level1 .expansion-panel-header-level1 ::ng-deep .mat-expansion-panel-header-description,.expansion-panel-level1 .expansion-panel-header-level1:hover ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level1 .expansion-panel-header-level1:hover ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu1-textcolor-inactive)!important}.expansion-panel-level1 .expansion-panel-header-level1-active{background-color:var(--default-navmenu1-buttoncolor-active)!important;height:48px!important;margin:0;padding-left:16px!important}.expansion-panel-level1 .expansion-panel-header-level1-active ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level1 .expansion-panel-header-level1-active ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu1-textcolor-active)!important}.expansion-panel-level1 ::ng-deep .mat-expansion-panel-body{margin-left:16px;margin-top:6px;margin-bottom:10px;padding-top:0;padding-left:4px!important;padding-right:0!important;padding-bottom:0!important;border-left:var(--default-navmenu1-border-treeline) 1px solid}.expansion-panel-header-title-level1,.expansion-panel-header-title-level1:hover{color:var(--default-navmenu1-textcolor-inactive)!important;font-weight:600}.expansion-panel-header-title-level1 span,.expansion-panel-header-title-level1:hover span{margin-left:8px}.expansion-panel-header-title-level1-active,.expansion-panel-header-title-level1-active:hover{color:var(--default-navmenu1-textcolor-active)!important;font-weight:600}.expansion-panel-header-title-level1-active span,.expansion-panel-header-title-level1-active:hover span{margin-left:8px}.navitem-level2-flat{padding-left:4px!important;height:28px!important}.navitem-level2-flat span{font-size:small;font-weight:600;margin-left:2px!important}.navitem-level2-flat .mat-icon{transform:scale(.6)}a.navitem-level2-flat span{color:var(--default-navmenu2-textcolor-inactive)!important}a.navitem-level2-active-flat span{color:var(--default-navmenu2-textcolor-active)!important}.expansion-panel-level2 .expansion-panel-header-level2,.expansion-panel-level2 .expansion-panel-header-level2:hover{height:26px!important;margin:0;padding-left:2px!important}.expansion-panel-level2 .expansion-panel-header-level2 .mat-icon,.expansion-panel-level2 .expansion-panel-header-level2:hover .mat-icon{transform:scale(.7);fill:var(--default-navmenu2-iconcolor-inactive)}.expansion-panel-level2 .expansion-panel-header-level2 span,.expansion-panel-level2 .expansion-panel-header-level2:hover span{margin-left:8px;font-size:small;font-weight:600;color:var(--default-navmenu2-textcolor-inactive)!important}.expansion-panel-level2 .expansion-panel-header-level2 ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level2 .expansion-panel-header-level2 ::ng-deep .mat-expansion-panel-header-description,.expansion-panel-level2 .expansion-panel-header-level2:hover ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level2 .expansion-panel-header-level2:hover ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu2-textcolor-inactive)!important}.expansion-panel-level2 .expansion-panel-header-level2-active{height:26px!important;margin:0;padding-left:2px!important}.expansion-panel-level2 .expansion-panel-header-level2-active .mat-icon{transform:scale(.7);fill:var(--default-navmenu2-iconcolor-active)}.expansion-panel-level2 .expansion-panel-header-level2-active span{margin-left:8px;font-weight:600;font-size:small;color:var(--default-navmenu2-textcolor-active)!important}.expansion-panel-level2 .expansion-panel-header-level2-active ::ng-deep .mat-expansion-indicator:after,.expansion-panel-level2 .expansion-panel-header-level2-active ::ng-deep .mat-expansion-panel-header-description{color:var(--default-navmenu1-textcolor-active)!important}.expansion-panel-level2 ::ng-deep .mat-expansion-panel-body{margin-left:16px;margin-top:0;padding-top:0;padding-left:0!important;padding-right:0!important;padding-bottom:0!important;border-left:0}.navitem-level3-flat{padding-left:4px!important;height:28px!important}.navitem-level3-flat span{font-size:small;font-weight:600;margin-left:2px!important}.navitem-level3-flat .mat-icon{transform:scale(.6)}a.navitem-level3-flat span{color:var(--default-navmenu2-textcolor-inactive)!important}a.navitem-level3-active-flat span{color:var(--default-navmenu2-textcolor-active)!important}\n"] }]
        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i2.Router }, { type: i3.MobicloudCoreService }, { type: i4.MobiCloudComponentsService }], propDecorators: { appLogoTemplate: [{
                type: Input
            }], appTitleTemplate: [{
                type: Input
            }], organizationSelectorTemplate: [{
                type: Input
            }], customerSelectorTemplate: [{
                type: Input
            }], vendorSelectorTemplate: [{
                type: Input
            }], profileMenuTemplate: [{
                type: Input
            }], menuNodes: [{
                type: Input
            }], toolbarItems: [{
                type: Input
            }], title: [{
                type: Input
            }], showMainHeader: [{
                type: Input
            }], showMainSidebar: [{
                type: Input
            }], showMainFooter: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 