mobicloud-core 1.0.94 → 1.0.98

package/bundles/mobicloud-core-components.umd.js

@@ -1,84 +1,499 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/flex-layout'), require('@angular/material/sidenav'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/expansion'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/tooltip'), require('@angular/material/card'), require('@angular/material/progress-spinner'), require('@angular/material/slide-toggle'), require('@angular/material/stepper'), require('devextreme-angular'), require('ngx-webcam'), require('mobicloud-core/icons'), require('@angular/cdk/layout'), require('rxjs/operators'), require('mobicloud-core'), require('@angular/material/dialog'), require('devextreme/ui/notify'), require('mobicloud-core/api'), require('devextreme/data/data_source'), require('devextreme/data/odata/store'), require('@angular/localize/init'), require('rxjs'), require('devextreme/data/array_store'), require('devextreme/ui/validation_engine'), require('devextreme/core/guid')) :
-    typeof define === 'function' && define.amd ? define('mobicloud-core/components', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/flex-layout', '@angular/material/sidenav', '@angular/material/button', '@angular/material/icon', '@angular/material/expansion', '@angular/material/list', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/tooltip', '@angular/material/card', '@angular/material/progress-spinner', '@angular/material/slide-toggle', '@angular/material/stepper', 'devextreme-angular', 'ngx-webcam', 'mobicloud-core/icons', '@angular/cdk/layout', 'rxjs/operators', 'mobicloud-core', '@angular/material/dialog', 'devextreme/ui/notify', 'mobicloud-core/api', 'devextreme/data/data_source', 'devextreme/data/odata/store', '@angular/localize/init', 'rxjs', 'devextreme/data/array_store', 'devextreme/ui/validation_engine', 'devextreme/core/guid'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mobicloud-core'] = global['mobicloud-core'] || {}, global['mobicloud-core'].components = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.flexLayout, global.ng.material.sidenav, global.ng.material.button, global.ng.material.icon, global.ng.material.expansion, global.ng.material.list, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.tooltip, global.ng.material.card, global.ng.material.progressSpinner, global.ng.material.slideToggle, global.ng.material.stepper, global['devextreme-angular'], global['ngx-webcam'], global['mobicloud-core'].icons, global.ng.cdk.layout, global.rxjs.operators, global['mobicloud-core'], global.ng.material.dialog, global['devextreme/ui/notify'], global['mobicloud-core'].api, global['devextreme/data/data_source'], global['devextreme/data/odata/store'], global.ng.localize.init, global.rxjs, global.ArrayStore, global.validationEngine, global.Guid));
-}(this, (function (exports, core, common, router, flexLayout, sidenav, button, icon, expansion, list, menu, toolbar, tooltip, card, progressSpinner, slideToggle, stepper, devextremeAngular, ngxWebcam, icons, layout, operators, mobicloudCore, dialog, notify, api, DataSource, ODataStore, init, rxjs, ArrayStore, validationEngine, Guid) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/flex-layout'), require('@angular/material/sidenav'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/expansion'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/tooltip'), require('@angular/material/card'), require('@angular/material/progress-spinner'), require('@angular/material/slide-toggle'), require('@angular/material/stepper'), require('devextreme-angular'), require('ngx-webcam'), require('mobicloud-core/icons'), require('@angular/cdk/layout'), require('rxjs/operators'), require('devextreme/data/data_source'), require('devextreme/data/odata/store'), require('mobicloud-core'), require('@angular/material/dialog'), require('devextreme/ui/notify'), require('mobicloud-core/api'), require('@angular/localize/init'), require('rxjs'), require('devextreme/data/array_store'), require('devextreme/ui/validation_engine'), require('devextreme/core/guid')) :
+    typeof define === 'function' && define.amd ? define('mobicloud-core/components', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/flex-layout', '@angular/material/sidenav', '@angular/material/button', '@angular/material/icon', '@angular/material/expansion', '@angular/material/list', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/tooltip', '@angular/material/card', '@angular/material/progress-spinner', '@angular/material/slide-toggle', '@angular/material/stepper', 'devextreme-angular', 'ngx-webcam', 'mobicloud-core/icons', '@angular/cdk/layout', 'rxjs/operators', 'devextreme/data/data_source', 'devextreme/data/odata/store', 'mobicloud-core', '@angular/material/dialog', 'devextreme/ui/notify', 'mobicloud-core/api', '@angular/localize/init', 'rxjs', 'devextreme/data/array_store', 'devextreme/ui/validation_engine', 'devextreme/core/guid'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mobicloud-core'] = global['mobicloud-core'] || {}, global['mobicloud-core'].components = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.flexLayout, global.ng.material.sidenav, global.ng.material.button, global.ng.material.icon, global.ng.material.expansion, global.ng.material.list, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.tooltip, global.ng.material.card, global.ng.material.progressSpinner, global.ng.material.slideToggle, global.ng.material.stepper, global['devextreme-angular'], global['ngx-webcam'], global['mobicloud-core'].icons, global.ng.cdk.layout, global.rxjs.operators, global['devextreme/data/data_source'], global['devextreme/data/odata/store'], global['mobicloud-core'], global.ng.material.dialog, global['devextreme/ui/notify'], global['mobicloud-core'].api, global.ng.localize.init, global.rxjs, global.ArrayStore, global.validationEngine, global.Guid));
+}(this, (function (exports, core, common, router, flexLayout, sidenav, button, icon, expansion, list, menu, toolbar, tooltip, card, progressSpinner, slideToggle, stepper, devextremeAngular, ngxWebcam, icons, layout, operators, DataSource, ODataStore, mobicloudCore, dialog, notify, api, init, rxjs, ArrayStore, validationEngine, Guid) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var notify__default = /*#__PURE__*/_interopDefaultLegacy(notify);
     var DataSource__default = /*#__PURE__*/_interopDefaultLegacy(DataSource);
     var ODataStore__default = /*#__PURE__*/_interopDefaultLegacy(ODataStore);
+    var notify__default = /*#__PURE__*/_interopDefaultLegacy(notify);
     var ArrayStore__default = /*#__PURE__*/_interopDefaultLegacy(ArrayStore);
     var validationEngine__default = /*#__PURE__*/_interopDefaultLegacy(validationEngine);
     var Guid__default = /*#__PURE__*/_interopDefaultLegacy(Guid);
 
-    var MainNavComponent = /** @class */ (function () {
-        function MainNavComponent(breakpointObserver, router, coreService) {
-            var _this = this;
-            this.breakpointObserver = breakpointObserver;
-            this.router = router;
-            this.coreService = coreService;
-            this.showMainHeader = false;
-            this.showMainSidebar = false;
-            this.showMainFooter = false;
-            this.ToolbarItemClick = new core.EventEmitter();
-            this.isHandset$ = this.breakpointObserver.observe(layout.Breakpoints.Handset)
-                .pipe(operators.map(function (result) { return result.matches; }), operators.shareReplay());
-            this.themesEnabled = this.coreService.configService.themes_enabled;
-            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.userName = p === null || p === void 0 ? void 0 : p.user_name; });
-            this.coreService.configService.localeIdObservable.subscribe(function (p) { return _this.currentLocaleId = p; });
-            this.coreService.configService.languageNameObservable.subscribe(function (p) { return _this.currentLanguageName = p; });
-            this.supportedLanguages = this.coreService.configService.getSupportedLanguages();
-            this.coreService.configService.themeNameObservable.subscribe(function (p) {
-                _this.currentTheme = p;
-                _this.currentThemeCaption = _this.coreService.configService.getThemeCaption(p);
-            });
-            this.supportedThemes = this.coreService.configService.getSupportedThemes();
-            this._appName = this.coreService._appName;
-            this._appVersion = this.coreService._appVersion;
-        }
-        MainNavComponent.prototype.onToolbarItemClick = function (name, parameters) {
-            this.ToolbarItemClick.emit({ name: name, parameters: parameters });
-        };
-        MainNavComponent.prototype.signout = function () {
-            this.coreService.signout();
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
         };
-        MainNavComponent.prototype.changeLanguage = function (localeId) {
-            if (this.currentLocaleId != localeId) {
-                var newHostUrl;
-                if (localeId == "en-US") {
-                    newHostUrl = this.coreService.configService.host_url_en;
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
                 }
-                else {
-                    newHostUrl = this.coreService.configService.host_url;
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
                 }
-                var newUrl;
-                if (location.pathname.startsWith('/')) {
-                    newUrl = newHostUrl + location.pathname.substring(1);
+                finally {
+                    f = t = 0;
                 }
-                else {
-                    newUrl = newHostUrl + location.pathname;
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
                 }
-                window.location.href = newUrl;
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
             }
-        };
-        MainNavComponent.prototype.changeTheme = function (themeName) {
-            this.coreService.configService.changeTheme(themeName);
-        };
-        return MainNavComponent;
-    }());
-    MainNavComponent.decorators = [
-        { type: core.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\"\n    [fxHide]=\"!showMainSidebar\">\n\n    <mat-toolbar class=\"menu-toolbar\">\n      <mat-toolbar-row>\n        <div class=\"menu-toolbar-content\" routerLink=\"/\">\n          <div class=\"menu-toolbar-logo-container\">\n            <svg-icon name=\"mobicloud_logo\" class=\"menu-toolbar-logo-icon\"></svg-icon>\n          </div>\n          <div class=\"menu-toolbar-app-tittle\">{{title}}</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     \n      <span class=\"toolbar-divider\"></span>\n\n      <!-- <button mat-icon-button appMaterialElevation routerLink=\"/signup\" aria-label=\"Settings\" class=\"toolbar-button\"\n          matTooltip=\"Back\">\n          <mat-icon>arrow_back</mat-icon>\n      </button> -->\n      <ng-container *ngIf=\"toolbarItems\">            \n        <ng-container *ngFor=\"let toolbarItem of toolbarItems\">\n            <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=\"toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n                <mat-icon svgIcon=\"{{toolbarItem.svg}}\" class=\"toolbar-button-icon\"></mat-icon>\n            </button>\n        </ng-container>\n        <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n      </ng-container>\n      \n      <button aria-label=\"Button\" *ngIf=\"userName\" mat-raised-button appMaterialElevation [matMenuTriggerFor]=\"profileMenu\" class=\"toolbar-button\" matTooltip=\"{{userName}}\">\n          <mat-icon svgIcon=\"mobicloud_profile\" class=\"toolbar-button-icon\"></mat-icon>\n      </button>\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\">Language</span><span> ({{currentLanguageName}})</span>\n        </button>        \n\n        <button aria-label=\"theme\" mat-menu-item [matMenuTriggerFor]=\"mobiThemes\" *ngIf=\"themesEnabled\">\n          <mat-icon svgIcon=\"mobicloud_language\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-Themes\">Theme</span><span> ({{currentThemeCaption}})</span>\n        </button>         \n       \n\n        <button aria-label=\"profile\" mat-menu-item routerLink=\"/management/profile\">\n          <mat-icon svgIcon=\"mobicloud_myprofile\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-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\">Sign out</span>\n        </button>\n        <button aria-label=\"default theme\" mat-menu-item>\n          <mat-icon svgIcon=\"mobicloud_theme_default\" class=\"menu-item-icon\"></mat-icon>\n          <span>{{_appName}} v{{_appVersion}}</span>\n        </button>\n      </mat-menu>\n      <mat-menu #languages>\n        <button aria-label=\"supported languages\" mat-menu-item *ngFor=\"let language of supportedLanguages\" [disabled]=\"currentLocaleId == language.LocaleId\" (click)=\"changeLanguage(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\">{{language.LanguageName}}</span>\n          </div>\n        </button>\n      </mat-menu>\n      <mat-menu #mobiThemes>\n        <button aria-label=\"chnage theme\" mat-menu-item *ngFor=\"let theme of supportedThemes\" [disabled]=\"currentTheme == theme.ThemeName\" (click)=\"changeTheme(theme.ThemeName)\">\n          <div class=\"flex_div\">\n            <svg-icon name=\"{{theme.Svg}}\" *ngIf=\"theme.Svg\" class=\"theme-icon menu-item-icon\"></svg-icon>\n            <span class=\"theme-text\">{{theme.ThemeCaption}}</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>\n",
-                    styles: [".sidenav-container{background-color:var(--default-sidebarcontent-color-background)}.sidenav{width:240px;border-right:0;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% - 100px)!important;background-color:var(--default-sidebarcontent-color-background)}.menu-toolbar{background-color:var(--default-navtoolbar-color-background);height:80px}.toolbar-menu-button-icon{color:var(--default-toolbar-iconcolor)}.menu-toolbar-app-tittle{color:var(--default-menu-title-color);font-size:small;margin:0;padding:0;line-height:4mm;height:4mm;text-align:right}.toolbar-button{background-color:var(--default-toolbar-buttoncolor);width:32px;height:32px;min-width:unset!important;padding:0!important;margin-left:4px;margin-top:20px}.toolbar-button-icon{margin-bottom:8px;width:16px;fill:var(--default-toolbar-iconcolor)}::ng-deep .mat-menu-content,::ng-deep .mat-menu-item{background-color:var(--default-popup-background)!important}::ng-deep .mat-menu-item{color:var(--default-popup-textcolor)!important}.menu-item-icon{fill:var(--default-popup-iconcolor)}.language-icon{margin-right:10px;height:16px;width:32px;margin-top:16px}.flex_div{display:flex}.theme-icon{transform:scale(.6)}.theme-text{margin-top:4px}.mat-nav-list{margin:10px 20px;background-color:var(--default-sidebarcontent-color-background)}::ng-deep .mat-list-item-content{padding:0!important}.navitem-level1{background-color:var(--default-navmenu1-buttoncolor-inactive);margin-bottom:12px;border-radius:8px;height:48px;color:var(--default-navmenu1-textcolor-inactive)!important}.mat-nav-list a.navitem-level1-active{background-color:var(--default-navmenu1-buttoncolor-active);color:var(--default-navmenu1-textcolor-active)!important}.navitem-level1 .mat-icon{transform:scale(.9);padding-left:16px}.navitem-level1 .active{fill:var(--default-navmenu1-iconcolor-active)}.navitem-level1 .inactive{fill:var(--default-navmenu1-iconcolor-inactive)}.navitem-level1 span{margin-left:6px;font-weight:600}.mat-expansion-panel{padding-bottom:0!important}.expansion-panel-level1{padding-bottom:10px!important}.expansion-panel-header-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-header-level1-active{background-color:var(--default-navmenu1-buttoncolor-active)!important;height:48px!important;margin:0;padding-left:16px!important}.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-active,.expansion-panel-header-title-level1-active:hover{color:var(--default-navmenu1-textcolor-active)!important;font-weight:600}.expansion-panel-header-title-level1 .mat-icon,.expansion-panel-header-title-level1-active .mat-icon{transform:scale(.8)}.expansion-panel-header-title-level1-active .active{fill:var(--default-navmenu1-iconcolor-active)}.expansion-panel-header-title-level1 .inactive{fill:var(--default-navmenu1-iconcolor-inactive)}.expansion-panel-header-title-level1 span,.expansion-panel-header-title-level1-active span{margin-left:8px;margin-top:2px}.expansion-panel-header-level1 .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level1 .mat-expansion-indicator:after{color:var(--default-navmenu1-textcolor-inactive)!important}.expansion-panel-header-level1-active .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level1-active .mat-expansion-indicator:after{color:var(--default-navmenu1-textcolor-active)!important}.mat-expansion-panel{background-color:var(--default-navmenu-color-background)!important}::ng-deep .mat-expansion-panel-content{background-color:var(--default-navmenucontent-color-background)}::ng-deep .expansion-panel-level1 .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:1px solid var(--default-navmenu1-border-treeline)}.navitem-level2-flat{padding-left:4px!important;font-size:small;height:28px!important;color:var(--default-navmenu2-textcolor-inactive)!important}.mat-nav-list a.navitem-level2-active-flat{color:var(--default-navmenu2-textcolor-active)!important}.navitem-level2-flat .mat-icon{transform:scale(.6)}.navitem-level2-flat .active{fill:var(--default-navmenu2-iconcolor-active)}.navitem-level2-flat .inactive{fill:var(--default-navmenu2-iconcolor-inactive)}.navitem-level2-flat span{margin-left:2px!important;padding-left:0!important;font-weight:600}.expansion-panel-header-level2,.expansion-panel-header-level2-active,.expansion-panel-header-level2:hover{height:26px!important;margin:0;font-size:small;padding-left:2px!important}.expansion-panel-header-title-level2,.expansion-panel-header-title-level2:hover{color:var(--default-navmenu2-textcolor-inactive)!important;font-weight:600}.expansion-panel-header-title-level2-active,.expansion-panel-header-title-level2-active:hover{color:var(--default-navmenu2-textcolor-active)!important;font-weight:600}.expansion-panel-header-title-level2 .mat-icon,.expansion-panel-header-title-level2-active .mat-icon{transform:scale(.7)}.expansion-panel-header-title-level2 .active,.expansion-panel-header-title-level2-active .active{fill:var(--default-navmenu2-iconcolor-active)}.expansion-panel-header-title-level2 .inactive,.expansion-panel-header-title-level2-active .inactive{fill:var(--default-navmenu2-iconcolor-inactive)}.expansion-panel-header-title-level2 span,.expansion-panel-header-title-level2-active span{margin-left:4px;margin-top:3px}.expansion-panel-header-level2 .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level2 .mat-expansion-indicator:after{color:var(--default-navmenu2-textcolor-inactive)!important}.expansion-panel-header-level2-active .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level2-active .mat-expansion-indicator:after{color:var(--default-navmenu2-textcolor-active)!important}::ng-deep .expansion-panel-level2 .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;font-size:small;height:28px!important;color:var(--default-navmenu3-textcolor-inactive)!important}.mat-nav-list a.navitem-level3-active-flat{color:var(--default-navmenu3-textcolor-active)!important}.navitem-level3-flat .mat-icon{transform:scale(.6)}.navitem-level3-flat .active{fill:var(--default-navmenu3-iconcolor-active)}.navitem-level3-flat .inactive{fill:var(--default-navmenu3-iconcolor-inactive)}.navitem-level3-flat span{margin-left:0!important;padding-left:0!important;font-weight:600}"]
-                },] }
-    ];
-    MainNavComponent.ctorParameters = function () { return [
-        { type: layout.BreakpointObserver },
-        { type: router.Router },
-        { type: mobicloudCore.MobicloudCoreService }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from) {
+        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+            to[j] = from[i];
+        return to;
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    var MainNavComponent = /** @class */ (function () {
+        function MainNavComponent(breakpointObserver, _router, coreService) {
+            var _this = this;
+            this.breakpointObserver = breakpointObserver;
+            this._router = _router;
+            this.coreService = coreService;
+            this.selectedOrganizationId = null;
+            this._organizationOpened = false;
+            this.showMainHeader = false;
+            this.showMainSidebar = false;
+            this.showMainFooter = false;
+            this.isOrganizationUser = false;
+            this.isEmployeeUser = false;
+            this.isCustomerUser = false;
+            this.isVendorUser = false;
+            this.isMasterUser = false;
+            this.isMasterAdmin = false;
+            this.ToolbarItemClick = new core.EventEmitter();
+            this.isHandset$ = this.breakpointObserver.observe(layout.Breakpoints.Handset)
+                .pipe(operators.map(function (result) { return result.matches; }), operators.shareReplay());
+            this.userImageUrl = mobicloudCore.getProfileImageUrl(undefined, undefined, undefined);
+            this.themesEnabled = this.coreService.configService.themes_enabled;
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) {
+                _this.userName = p === null || p === void 0 ? void 0 : p.user_username;
+                _this.user_fullname = p === null || p === void 0 ? void 0 : p.user_name;
+                _this.onUserChanged();
+            });
+            this.coreService.applicationDetailsObservable.subscribe(function (p) {
+                if (_this.coreService.isMasterUserAuthenticated()) {
+                    _this.org_name = "MASTER";
+                    _this.org_accountnum = "••••••";
+                }
+                else {
+                    _this.org_name = p === null || p === void 0 ? void 0 : p.OrganizationName;
+                    _this.org_accountnum = p === null || p === void 0 ? void 0 : p.OrganizationAccountNumber;
+                }
+            });
+            this.coreService.profileDetailsObservable.subscribe(function (p) {
+                var _a, _b, _c, _d, _e, _f;
+                _this.userImageUrl = mobicloudCore.getProfileImageUrl((_b = (_a = _this.coreService.profileDetails) === null || _a === void 0 ? void 0 : _a.Image) === null || _b === void 0 ? void 0 : _b.StorageAccountName, (_d = (_c = _this.coreService.profileDetails) === null || _c === void 0 ? void 0 : _c.Image) === null || _d === void 0 ? void 0 : _d.BlobContainerName, (_f = (_e = _this.coreService.profileDetails) === null || _e === void 0 ? void 0 : _e.Image) === null || _f === void 0 ? void 0 : _f.BlobName);
+            });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isOrganizationUser = p === null || p === void 0 ? void 0 : p.isOrganizationUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isEmployeeUser = p === null || p === void 0 ? void 0 : p.isEmployeeUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isCustomerUser = p === null || p === void 0 ? void 0 : p.isCustomerUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isVendorUser = p === null || p === void 0 ? void 0 : p.isVendorUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isMasterUser = p === null || p === void 0 ? void 0 : p.isMasterUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isMasterAdmin = p === null || p === void 0 ? void 0 : p.isMasterAdmin; });
+            this.coreService.configService.localeIdObservable.subscribe(function (p) { return _this.currentLocaleId = p; });
+            this.coreService.configService.languageNameObservable.subscribe(function (p) { return _this.currentLanguageName = p; });
+            this.supportedLanguages = this.coreService.configService.getSupportedLanguages();
+            this.coreService.configService.themeNameObservable.subscribe(function (p) {
+                _this.currentTheme = p;
+                _this.currentThemeCaption = _this.coreService.configService.getThemeCaption(p);
+            });
+            this.supportedThemes = this.coreService.configService.getSupportedThemes();
+            this._appName = this.coreService._appName;
+            this._appVersion = this.coreService._appVersion;
+        }
+        MainNavComponent.prototype.onUserChanged = function () {
+            if (this.coreService.isMasterUserAuthenticated()) {
+                if (this.coreService.hasMasterOrganization()) {
+                    this.selectedOrganizationId = this.coreService.getMasterOrganization();
+                }
+                this.createOrganizationsDataSource();
+            }
+        };
+        MainNavComponent.prototype.onToolbarItemClick = function (name, parameters) {
+            this.ToolbarItemClick.emit({ name: name, parameters: parameters });
+        };
+        MainNavComponent.prototype.signout = function () {
+            this.coreService.signout();
+        };
+        MainNavComponent.prototype.changeLanguage = function (localeId) {
+            if (this.currentLocaleId != localeId) {
+                var newHostUrl;
+                if (localeId == "en-US") {
+                    newHostUrl = this.coreService.configService.host_url_en;
+                }
+                else {
+                    newHostUrl = this.coreService.configService.host_url;
+                }
+                var newUrl;
+                if (location.pathname.startsWith('/')) {
+                    newUrl = newHostUrl + location.pathname.substring(1);
+                }
+                else {
+                    newUrl = newHostUrl + location.pathname;
+                }
+                window.location.href = newUrl;
+            }
+        };
+        MainNavComponent.prototype.changeTheme = function (themeName) {
+            this.coreService.configService.changeTheme(themeName);
+        };
+        MainNavComponent.prototype.createOrganizationsDataSource = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_g) {
+                    this.organizations_store = new ODataStore__default['default']({
+                        url: this.coreService.configService.getMobiManagementDataUrl() + "OrganizationInfo/GetAll()",
+                        withCredentials: true,
+                        key: "OrganizationId",
+                        keyType: "Guid",
+                        version: 4,
+                        beforeSend: function (e) {
+                            var _a, _b, _c, _d;
+                            if (((_a = e.method) === null || _a === void 0 ? void 0 : _a.toUpperCase()) == "GET") {
+                                var regex = (/\)\(([^)]+)\)/).exec((_b = e.url) !== null && _b !== void 0 ? _b : '');
+                                if (regex && regex[1]) {
+                                    var orgId = regex[1];
+                                    e.url = _this.coreService.configService.getMobiManagementDataUrl() + "OrganizationInfo(" + orgId + ")";
+                                }
+                                if (!((_c = e.params) === null || _c === void 0 ? void 0 : _c.$orderby)) {
+                                    e.params.$orderby = "Name";
+                                }
+                                if ((_d = e.params) === null || _d === void 0 ? void 0 : _d.$filter) {
+                                    e.params.$filter = e.params.$filter + " and Active eq true or Active eq null";
+                                }
+                                else {
+                                    e.params.$filter = "Active eq true or Active eq null";
+                                }
+                                e.params.$select = "OrganizationId,Name,AccountNumber";
+                            }
+                        }
+                    });
+                    this.organizations_ds = new DataSource__default['default']({
+                        store: this.organizations_store,
+                        requireTotalCount: true,
+                        map: function (dataItem) {
+                            return Object.assign(new mobicloudCore.OrganizationInfo(), dataItem);
+                        }
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        MainNavComponent.prototype.organizationChanged = function (args) {
+            var _a, _b;
+            this.selectedOrganizationId = ((_a = args.selectedRowsData) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (_b = args.selectedRowsData[0]) === null || _b === void 0 ? void 0 : _b.OrganizationId : null;
+        };
+        MainNavComponent.prototype.organizationChanged_ValueChanged = function (e) {
+            if (e.value) {
+                this.coreService.setMasterOrganization(e.value.toString()).then(function () {
+                    console.log("Organization changed");
+                    location.reload();
+                }).catch(function (res) {
+                    console.error("Failed changing organization:", res);
+                });
+            }
+            else {
+                this.coreService.removeMasterOrganization();
+                this._router.navigateByUrl("/").then(function (res) {
+                    location.reload();
+                });
+            }
+        };
+        return MainNavComponent;
+    }());
+    MainNavComponent.decorators = [
+        { type: core.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\"\n    [fxHide]=\"!showMainSidebar\">\n\n    <mat-toolbar class=\"menu-toolbar\">\n      <mat-toolbar-row>\n        <div class=\"menu-toolbar-content\" routerLink=\"/\">\n          <div class=\"menu-toolbar-logo-container\">\n            <svg-icon name=\"mobicloud_logo\" class=\"menu-toolbar-logo-icon\"></svg-icon>\n          </div>\n          <div class=\"menu-toolbar-app-tittle\">{{title}}</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\n      <div class=\"organization-select-container\" *ngIf=\"isMasterUser || isMasterAdmin\">\n        <dx-drop-down-box stylingMode=\"outlined\" placeholder=\"Select Organization\" [showClearButton]=\"true\" [dataSource]=\"organizations_ds\" [(value)]=\"selectedOrganizationId\" valueExpr=\"OrganizationId\" displayExpr=\"Name\" [(opened)]=\"_organizationOpened\" (onValueChanged)=\"organizationChanged_ValueChanged($event)\">\n          <dxo-drop-down-options title=\"Organizations\" i18n-title=\"@@FieldCaption-Organizations\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\" width=\"340px\"></dxo-drop-down-options>\n          <div *dxTemplate=\"let data of 'content'\">\n            <dx-data-grid [focusedRowKey]=\"selectedOrganizationId\" [dataSource]=\"organizations_ds\" [hoverStateEnabled]=\"true\" height=\"100%\" (onSelectionChanged)=\"organizationChanged($event)\" (onRowClick)=\"_organizationOpened = false\">\n              <dxi-column dataField=\"ID\" i18n-caption=\"@@GridColumn-Id\" caption=\"Id\" [visible]=\"false\"></dxi-column>\n              <dxi-column dataField=\"AccountNumber\" i18n-caption=\"@@GridColumn-AccountNumber\" caption=\"Account no.\" width=\"100px\"></dxi-column>\n              <dxi-column dataField=\"Name\" 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  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=\"menu-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n              <div class=\"menu-toolbar-button-content\">\n                <svg-icon [name]=\"toolbarItem.svg\" svgClass=\"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      <button mat-raised-button *ngIf=\"userName\"  [matMenuTriggerFor]=\"profileMenu\" appMaterialElevation [matTooltip]=\"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\">\n          <img alt=\"\"alt=\"\" [src]=\"userImageUrl\" class=\"menu-toolbar-button-profileImage\">\n          <div class=\"profile-text-container\">\n            <div class=\"profile-text-accountname\">{{org_name}}</div>\n            <div class=\"profile-text-accountdetails\">\n              <div class=\"profile-text-accountnumber\">{{org_accountnum}}</div>\n              <div class=\"profile-text-username\">\n                <svg-icon name=\"mobicloud_employee\" svgClass=\"username-icon\" *ngIf=\"isEmployeeUser\"></svg-icon>\n                <svg-icon name=\"mobicloud_system_user\" svgClass=\"username-icon\" *ngIf=\"isOrganizationUser\"></svg-icon>\n                <svg-icon name=\"mobicloud_customer\" svgClass=\"username-icon\" *ngIf=\"isCustomerUser\"></svg-icon>\n                <svg-icon name=\"mobicloud_vendor\" svgClass=\"username-icon\" *ngIf=\"isVendorUser\"></svg-icon>\n                <svg-icon name=\"mobicloud_master_user\" svgClass=\"username-icon\" *ngIf=\"isMasterUser\"></svg-icon>\n                <svg-icon name=\"mobicloud_master_admin\" svgClass=\"username-icon\" *ngIf=\"isMasterAdmin\"></svg-icon>\n                {{userName}}\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      <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\">Language</span><span> ({{currentLanguageName}})</span>\n        </button>        \n\n        <button aria-label=\"theme\" mat-menu-item [matMenuTriggerFor]=\"mobiThemes\" *ngIf=\"themesEnabled\">\n          <mat-icon svgIcon=\"mobicloud_language\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-Themes\">Theme</span><span> ({{currentThemeCaption}})</span>\n        </button>         \n       \n\n        <button aria-label=\"profile\" mat-menu-item routerLink=\"/management/profile\" *ngIf=\"(!isMasterUser && !isMasterAdmin)\">\n          <mat-icon svgIcon=\"mobicloud_myprofile\" class=\"menu-item-icon\"></mat-icon>\n          <span i18n=\"@@Button-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\">Sign out</span>\n        </button>\n        <button aria-label=\"default theme\" mat-menu-item>\n          <mat-icon svgIcon=\"mobicloud_theme_default\" class=\"menu-item-icon\"></mat-icon>\n          <span>{{_appName}} v{{_appVersion}}</span>\n        </button>\n      </mat-menu>\n      <mat-menu #languages>\n        <button aria-label=\"supported languages\" mat-menu-item *ngFor=\"let language of supportedLanguages\" [disabled]=\"currentLocaleId == language.LocaleId\" (click)=\"changeLanguage(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\">{{language.LanguageName}}</span>\n          </div>\n        </button>\n      </mat-menu>\n      <mat-menu #mobiThemes>\n        <button aria-label=\"chnage theme\" mat-menu-item *ngFor=\"let theme of supportedThemes\" [disabled]=\"currentTheme == theme.ThemeName\" (click)=\"changeTheme(theme.ThemeName)\">\n          <div class=\"flex_div\">\n            <svg-icon name=\"{{theme.Svg}}\" *ngIf=\"theme.Svg\" class=\"theme-icon menu-item-icon\"></svg-icon>\n            <span class=\"theme-text\">{{theme.ThemeCaption}}</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:0;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% - 100px)!important;background-color:var(--default-sidebarcontent-color-background)}.menu-toolbar{background-color:var(--default-navtoolbar-color-background);height:80px}.toolbar-menu-button-icon{color:var(--default-toolbar-iconcolor)}.menu-toolbar-app-tittle{color:var(--default-menu-title-color);font-size:small;margin:0;padding:0;line-height:4mm;height:4mm;text-align:right}.organization-select-container{margin-bottom:1px;margin-top:21px}::ng-deep .organization-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:0!important;margin-right:8px!important;margin-top:20px}.menu-toolbar-button-content{height:100%;display:flex;margin-left:8px!important}.menu-toolbar-button-icon{pointer-events:none;fill:var(--default-groupbox-header-iconcolor);width:22px;height:22px;margin-top:8px!important}.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}.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}::ng-deep .mat-menu-content,::ng-deep .mat-menu-item{background-color:var(--default-popup-background)!important}::ng-deep .mat-menu-item{color:var(--default-popup-textcolor)!important}.menu-item-icon{fill:var(--default-popup-iconcolor)}.language-icon{margin-right:10px;height:16px;width:32px;margin-top:16px}.flex_div{display:flex}.theme-icon{transform:scale(.6)}.theme-text{margin-top:4px}.mat-nav-list{margin:10px 20px;background-color:var(--default-sidebarcontent-color-background)}::ng-deep .mat-list-item-content{padding:0!important}.navitem-level1{background-color:var(--default-navmenu1-buttoncolor-inactive);margin-bottom:12px;border-radius:8px;height:48px;color:var(--default-navmenu1-textcolor-inactive)!important}.mat-nav-list a.navitem-level1-active{background-color:var(--default-navmenu1-buttoncolor-active);color:var(--default-navmenu1-textcolor-active)!important}.navitem-level1 .mat-icon{transform:scale(.9);padding-left:16px}.navitem-level1 .active{fill:var(--default-navmenu1-iconcolor-active)}.navitem-level1 .inactive{fill:var(--default-navmenu1-iconcolor-inactive)}.navitem-level1 span{margin-left:6px;font-weight:600}.mat-expansion-panel{padding-bottom:0!important}.expansion-panel-level1{padding-bottom:10px!important}.expansion-panel-header-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-header-level1-active{background-color:var(--default-navmenu1-buttoncolor-active)!important;height:48px!important;margin:0;padding-left:16px!important}.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-active,.expansion-panel-header-title-level1-active:hover{color:var(--default-navmenu1-textcolor-active)!important;font-weight:600}.expansion-panel-header-title-level1 .mat-icon,.expansion-panel-header-title-level1-active .mat-icon{transform:scale(.8)}.expansion-panel-header-title-level1-active .active{fill:var(--default-navmenu1-iconcolor-active)}.expansion-panel-header-title-level1 .inactive{fill:var(--default-navmenu1-iconcolor-inactive)}.expansion-panel-header-title-level1 span,.expansion-panel-header-title-level1-active span{margin-left:8px;margin-top:2px}.expansion-panel-header-level1 .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level1 .mat-expansion-indicator:after{color:var(--default-navmenu1-textcolor-inactive)!important}.expansion-panel-header-level1-active .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level1-active .mat-expansion-indicator:after{color:var(--default-navmenu1-textcolor-active)!important}.mat-expansion-panel{background-color:var(--default-navmenu-color-background)!important}::ng-deep .mat-expansion-panel-content{background-color:var(--default-navmenucontent-color-background)}::ng-deep .expansion-panel-level1 .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:1px solid var(--default-navmenu1-border-treeline)}.navitem-level2-flat{padding-left:4px!important;font-size:small;height:28px!important;color:var(--default-navmenu2-textcolor-inactive)!important}.mat-nav-list a.navitem-level2-active-flat{color:var(--default-navmenu2-textcolor-active)!important}.navitem-level2-flat .mat-icon{transform:scale(.6)}.navitem-level2-flat .active{fill:var(--default-navmenu2-iconcolor-active)}.navitem-level2-flat .inactive{fill:var(--default-navmenu2-iconcolor-inactive)}.navitem-level2-flat span{margin-left:2px!important;padding-left:0!important;font-weight:600}.expansion-panel-header-level2,.expansion-panel-header-level2-active,.expansion-panel-header-level2:hover{height:26px!important;margin:0;font-size:small;padding-left:2px!important}.expansion-panel-header-title-level2,.expansion-panel-header-title-level2:hover{color:var(--default-navmenu2-textcolor-inactive)!important;font-weight:600}.expansion-panel-header-title-level2-active,.expansion-panel-header-title-level2-active:hover{color:var(--default-navmenu2-textcolor-active)!important;font-weight:600}.expansion-panel-header-title-level2 .mat-icon,.expansion-panel-header-title-level2-active .mat-icon{transform:scale(.7)}.expansion-panel-header-title-level2 .active,.expansion-panel-header-title-level2-active .active{fill:var(--default-navmenu2-iconcolor-active)}.expansion-panel-header-title-level2 .inactive,.expansion-panel-header-title-level2-active .inactive{fill:var(--default-navmenu2-iconcolor-inactive)}.expansion-panel-header-title-level2 span,.expansion-panel-header-title-level2-active span{margin-left:4px;margin-top:3px}.expansion-panel-header-level2 .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level2 .mat-expansion-indicator:after{color:var(--default-navmenu2-textcolor-inactive)!important}.expansion-panel-header-level2-active .mat-expansion-panel-header-description,::ng-deep .expansion-panel-header-level2-active .mat-expansion-indicator:after{color:var(--default-navmenu2-textcolor-active)!important}::ng-deep .expansion-panel-level2 .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;font-size:small;height:28px!important;color:var(--default-navmenu3-textcolor-inactive)!important}.mat-nav-list a.navitem-level3-active-flat{color:var(--default-navmenu3-textcolor-active)!important}.navitem-level3-flat .mat-icon{transform:scale(.6)}.navitem-level3-flat .active{fill:var(--default-navmenu3-iconcolor-active)}.navitem-level3-flat .inactive{fill:var(--default-navmenu3-iconcolor-inactive)}.navitem-level3-flat span{margin-left:0!important;padding-left:0!important;font-weight:600}"]
+                },] }
+    ];
+    MainNavComponent.ctorParameters = function () { return [
+        { type: layout.BreakpointObserver },
+        { type: router.Router },
+        { type: mobicloudCore.MobicloudCoreService }
     ]; };
     MainNavComponent.propDecorators = {
         menuNodes: [{ type: core.Input }],
@@ -302,451 +717,139 @@
             configurable: true
         });
         Object.defineProperty(MessageBoxDialogComponent.prototype, "ButtonClass_Primary", {
-            get: function () {
-                var classList = '';
-                if (this.isError) {
-                    classList = 'dialog-button dialog-button-accent';
-                }
-                else if (this.isWarning) {
-                    classList = 'dialog-button dialog-button-accent';
-                }
-                else {
-                    classList = 'dialog-button dialog-button-primary';
-                }
-                return classList;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return MessageBoxDialogComponent;
-    }());
-    MessageBoxDialogComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'mobicloud-message-box-dialog',
-                    template: "<div mat-dialog-container class=\"simple-dialog-container\">\n    <mat-toolbar *ngIf=\"style==1\" [ngClass]=\"ToolbarClass\">\n      {{caption}}\n    </mat-toolbar>\n    <div class=\"title\" *ngIf=\"title!==''\">\n      <p>\n        {{title}}\n      </p>\n    </div>\n    <div class=\"message\" *ngIf=\"message!==''\">\n      <p>{{message}}</p>\n    </div>\n    <div class=\"dialog-button-container\">\n      <div *ngIf=\"button==0\">\n        <button mat-flat-button (click)=\"onOk()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Ok\">Ok</button>\n      </div>\n      <div *ngIf=\"button==1\">\n        <button mat-flat-button (click)=\"onOk()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Ok\">Ok</button>\n        <button mat-flat-button (click)=\"onCancel()\" tabindex=\"-1\" class=\"dialog-button dialog-button-accent\" i18n=\"@@Button-Cancel\">Cancel</button>\n      </div>\n      <div *ngIf=\"button==2\">\n        <button mat-flat-button (click)=\"onYes()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Yes\">Yes</button>\n        <button mat-flat-button (click)=\"onNo()\" tabindex=\"-1\" class=\"dialog-button dialog-button-accent\" i18n=\"@@Button-No\">No</button>\n      </div>\n      <div *ngIf=\"button==3\">\n        <button mat-flat-button (click)=\"onAccept()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Accept\">Accept</button>\n        <button mat-flat-button (click)=\"onReject()\" tabindex=\"-1\" class=\"dialog-button dialog-button-accent\" i18n=\"@@Button-Reject\">Reject</button>\n      </div>\n    </div>\n  </div>",
-                    encapsulation: core.ViewEncapsulation.None,
-                    styles: [".mat-dialog-container{padding:0!important}.caption{background-color:var(--default-basecolor-dark);color:var(--default-basecolor-background-light)}.caption,.caption_error{margin:0!important;height:30px;font-size:medium}.caption_error{background-color:var(--default-buttoncolor-error)!important;color:var(--default-buttoncolor-text-error)}.caption_warning{margin:0!important;background-color:var(--default-buttoncolor-warn)!important;color:var(--default-buttoncolor-text-warn)!important;height:30px;font-size:medium}div.title{font-weight:700;padding-left:25px;padding-right:25px;padding-bottom:0}div.message{padding:0 25px;font-size:12pt}.dialog-button-container{padding:10px;float:right}.dialog-button{margin-left:5px}.dialog-button-primary{background-color:var(--default-buttoncolor-primary);color:var(--default-buttoncolor-text-primary)}.dialog-button-accent,.dialog-button-error,.dialog-button-warn{background-color:var(--default-buttoncolor-accent);color:var(--default-buttoncolor-text-accent)}"]
-                },] }
-    ];
-    MessageBoxDialogComponent.ctorParameters = function () { return [
-        { type: dialog.MatDialogRef },
-        { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
-    ]; };
-
-    var ContentToolbarComponent = /** @class */ (function () {
-        function ContentToolbarComponent() {
-            this.toobarEnabled = true;
-            this.toobarTitleIcon = "";
-            this.toobarTitle = "";
-            this.ToolbarItemClick = new core.EventEmitter();
-        }
-        ContentToolbarComponent.prototype.ngOnInit = function () {
-        };
-        ContentToolbarComponent.prototype.onToolbarItemClick = function (name, parameters) {
-            this.ToolbarItemClick.emit({ name: name, parameters: parameters });
-        };
-        return ContentToolbarComponent;
-    }());
-    ContentToolbarComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'mobicloud-content-toolbar',
-                    template: "<mat-toolbar class=\"content-toolbar\" *ngIf=\"toobarEnabled\">\n  <mat-toolbar-row class=\"content-toolbar-row\">\n    <ng-container *ngIf=\"preToolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of preToolbarItems\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-pre-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n              <mat-icon svgIcon=\"{{toolbarItem.svg}}\" class=\"content-pre-toolbar-button-icon\"></mat-icon>\n          </button>\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>              \n      <div class=\"content-toolbar-title\">\n        <!-- <mat-icon svgIcon=\"{{toobarTitleIcon}}\" class=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></mat-icon> -->\n        <svg-icon [name]=\"toobarTitleIcon\" svgClass=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></svg-icon>\n        {{toobarTitle}}\n      </div>\n      \n      <ng-content></ng-content>\n    <span class=\"content-toolbar-divider\"></span>\n    \n    <ng-container *ngIf=\"toolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of toolbarItems\">\n        \n        <ng-container *ngIf=\"toolbarItem.children\">\n          <button aria-label=\"Button\" [matMenuTriggerFor]=\"toolbarChildMenu\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\"  matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n          <mat-menu #toolbarChildMenu>\n            <ng-container *ngFor=\"let childToolbarItem of toolbarItem.children\">\n              <button aria-label=\"button\" mat-menu-item [routerLink]=\"childToolbarItem.link ? childToolbarItem.link : null\" (click)=\"[childToolbarItem.click ? onToolbarItemClick(childToolbarItem.click, childToolbarItem.click_paramters) : null]\">\n                <mat-icon [svgIcon]=\"childToolbarItem.svg\" class=\"content-toolbar-menu-item-icon\"></mat-icon>\n                <span>{{childToolbarItem.caption}}</span>\n              </button>\n            </ng-container>\n          </mat-menu>\n        </ng-container>\n\n        <ng-container *ngIf=\"!toolbarItem.children\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n        </ng-container>\n\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>\n  </mat-toolbar-row>\n</mat-toolbar> ",
-                    styles: [".content-toolbar{background-color:transparent!important;min-height:32px!important;max-height:32px!important;margin-bottom:14px}.content-toolbar-row{padding:0}.content-pre-toolbar-button{background-color:transparent!important;width:32px;height:32px;min-width:unset!important;padding:0!important;margin-right:10px!important}.content-pre-toolbar-button-icon{margin-bottom:8px;width:20px;fill:var(--default-toolbar-iconcolor-nobackground)}.content-toolbar-title{font-size:large;font-weight:600;color:var(--default-pagecaption-textcolor);display:flex}.content-toolbar-title-icon{height:20px;width:20px;margin-right:8px;margin-top:5px;fill:var(--default-pagecaption-iconcolor)}.content-toolbar-divider{flex:1 1 auto}.content-toolbar-button{background-color:var(--default-toolbar-iconcolor-withbackground)!important;width:32px;height:32px;min-width:unset!important;padding:0!important;margin-left:8px!important}.content-toolbar-button-icon{pointer-events:none;fill:var(--default-toolbar-iconcolor);width:16px;height:16px;margin-top:6px}.content-toolbar-menu-item-icon{fill:var(--default-popup-iconcolor)}"]
-                },] }
-    ];
-    ContentToolbarComponent.ctorParameters = function () { return []; };
-    ContentToolbarComponent.propDecorators = {
-        toobarEnabled: [{ type: core.Input }],
-        preToolbarItems: [{ type: core.Input }],
-        toobarTitleIcon: [{ type: core.Input }],
-        toobarTitle: [{ type: core.Input }],
-        toolbarItems: [{ type: core.Input }],
-        ToolbarItemClick: [{ type: core.Output }]
-    };
-
-    var MaterialElevationDirective = /** @class */ (function () {
-        function MaterialElevationDirective(element, renderer) {
-            this.element = element;
-            this.renderer = renderer;
-            this.defaultElevation = 0;
-            this.raisedElevation = 8;
-            this.setElevation(this.defaultElevation);
-        }
-        MaterialElevationDirective.prototype.ngOnChanges = function (_changes) {
-            this.setElevation(this.defaultElevation);
-        };
-        MaterialElevationDirective.prototype.onMouseEnter = function () {
-            this.setElevation(this.raisedElevation);
-        };
-        MaterialElevationDirective.prototype.onMouseLeave = function () {
-            this.setElevation(this.defaultElevation);
-        };
-        MaterialElevationDirective.prototype.setElevation = function (amount) {
-            var _this = this;
-            var classesToRemove = Array.from(this.element.nativeElement.classList).filter(function (c) { return c.startsWith('mat-elevation-z'); });
-            classesToRemove.forEach(function (c) {
-                _this.renderer.removeClass(_this.element.nativeElement, c);
-            });
-            var newClass = "mat-elevation-z" + amount;
-            this.renderer.addClass(this.element.nativeElement, newClass);
-        };
-        return MaterialElevationDirective;
-    }());
-    MaterialElevationDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[appMaterialElevation]'
-                },] }
-    ];
-    MaterialElevationDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 }
-    ]; };
-    MaterialElevationDirective.propDecorators = {
-        defaultElevation: [{ type: core.Input }],
-        raisedElevation: [{ type: core.Input }],
-        onMouseEnter: [{ type: core.HostListener, args: ['mouseenter',] }],
-        onMouseLeave: [{ type: core.HostListener, args: ['mouseleave',] }]
-    };
-
-    var ProfilePageComponent = /** @class */ (function () {
-        function ProfilePageComponent(coreService) {
-            this.coreService = coreService;
-            this.isSystemUser = false;
-            this.isEmployee = false;
-            this.isCustomerUser = false;
-            this.isVendorUser = false;
-        }
-        ProfilePageComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isSystemUser = p === null || p === void 0 ? void 0 : p.isOrganizationUser; });
-            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isEmployee = p === null || p === void 0 ? void 0 : p.isEmployeeUser; });
-            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isCustomerUser = p === null || p === void 0 ? void 0 : p.isCustomerUser; });
-            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isVendorUser = p === null || p === void 0 ? void 0 : p.isVendorUser; });
-        };
-        return ProfilePageComponent;
-    }());
-    ProfilePageComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'mobicloud-profile-page',
-                    template: "<div class=\"profile-container\">    \n\n    <mobicloud-profile-page-system-user *ngIf=\"isSystemUser\"></mobicloud-profile-page-system-user>\n    <mobicloud-profile-page-employee *ngIf=\"isEmployee\"></mobicloud-profile-page-employee>\n    <mobicloud-profile-page-customer-user *ngIf=\"isCustomerUser\"></mobicloud-profile-page-customer-user>\n    <mobicloud-profile-page-vendor-user *ngIf=\"isVendorUser\"></mobicloud-profile-page-vendor-user>\n\n</div>\n",
-                    styles: [".profile-container{margin:20px 20px 10px}"]
-                },] }
-    ];
-    ProfilePageComponent.ctorParameters = function () { return [
-        { type: mobicloudCore.MobicloudCoreService }
-    ]; };
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
+            get: function () {
+                var classList = '';
+                if (this.isError) {
+                    classList = 'dialog-button dialog-button-accent';
                 }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
+                else if (this.isWarning) {
+                    classList = 'dialog-button dialog-button-accent';
+                }
+                else {
+                    classList = 'dialog-button dialog-button-primary';
+                }
+                return classList;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return MessageBoxDialogComponent;
+    }());
+    MessageBoxDialogComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'mobicloud-message-box-dialog',
+                    template: "<div mat-dialog-container class=\"simple-dialog-container\">\n    <mat-toolbar *ngIf=\"style==1\" [ngClass]=\"ToolbarClass\">\n      {{caption}}\n    </mat-toolbar>\n    <div class=\"title\" *ngIf=\"title!==''\">\n      <p>\n        {{title}}\n      </p>\n    </div>\n    <div class=\"message\" *ngIf=\"message!==''\">\n      <p>{{message}}</p>\n    </div>\n    <div class=\"dialog-button-container\">\n      <div *ngIf=\"button==0\">\n        <button mat-flat-button (click)=\"onOk()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Ok\">Ok</button>\n      </div>\n      <div *ngIf=\"button==1\">\n        <button mat-flat-button (click)=\"onOk()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Ok\">Ok</button>\n        <button mat-flat-button (click)=\"onCancel()\" tabindex=\"-1\" class=\"dialog-button dialog-button-accent\" i18n=\"@@Button-Cancel\">Cancel</button>\n      </div>\n      <div *ngIf=\"button==2\">\n        <button mat-flat-button (click)=\"onYes()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Yes\">Yes</button>\n        <button mat-flat-button (click)=\"onNo()\" tabindex=\"-1\" class=\"dialog-button dialog-button-accent\" i18n=\"@@Button-No\">No</button>\n      </div>\n      <div *ngIf=\"button==3\">\n        <button mat-flat-button (click)=\"onAccept()\" tabindex=\"-1\" [ngClass]=\"ButtonClass_Primary\" i18n=\"@@Button-Accept\">Accept</button>\n        <button mat-flat-button (click)=\"onReject()\" tabindex=\"-1\" class=\"dialog-button dialog-button-accent\" i18n=\"@@Button-Reject\">Reject</button>\n      </div>\n    </div>\n  </div>",
+                    encapsulation: core.ViewEncapsulation.None,
+                    styles: [".mat-dialog-container{padding:0!important}.caption{background-color:var(--default-basecolor-dark);color:var(--default-basecolor-background-light)}.caption,.caption_error{margin:0!important;height:30px;font-size:medium}.caption_error{background-color:var(--default-buttoncolor-error)!important;color:var(--default-buttoncolor-text-error)}.caption_warning{margin:0!important;background-color:var(--default-buttoncolor-warn)!important;color:var(--default-buttoncolor-text-warn)!important;height:30px;font-size:medium}div.title{font-weight:700;padding-left:25px;padding-right:25px;padding-bottom:0}div.message{padding:0 25px;font-size:12pt}.dialog-button-container{padding:10px;float:right}.dialog-button{margin-left:5px}.dialog-button-primary{background-color:var(--default-buttoncolor-primary);color:var(--default-buttoncolor-text-primary)}.dialog-button-accent,.dialog-button-error,.dialog-button-warn{background-color:var(--default-buttoncolor-accent);color:var(--default-buttoncolor-text-accent)}"]
+                },] }
+    ];
+    MessageBoxDialogComponent.ctorParameters = function () { return [
+        { type: dialog.MatDialogRef },
+        { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+    ]; };
+
+    var ContentToolbarComponent = /** @class */ (function () {
+        function ContentToolbarComponent() {
+            this.toobarEnabled = true;
+            this.toobarTitleIcon = "";
+            this.toobarTitle = "";
+            this.ToolbarItemClick = new core.EventEmitter();
         }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
+        ContentToolbarComponent.prototype.ngOnInit = function () {
+        };
+        ContentToolbarComponent.prototype.onToolbarItemClick = function (name, parameters) {
+            this.ToolbarItemClick.emit({ name: name, parameters: parameters });
+        };
+        return ContentToolbarComponent;
+    }());
+    ContentToolbarComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'mobicloud-content-toolbar',
+                    template: "<mat-toolbar class=\"content-toolbar\" *ngIf=\"toobarEnabled\">\n  <mat-toolbar-row class=\"content-toolbar-row\">\n    <ng-container *ngIf=\"preToolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of preToolbarItems\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-pre-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n              <mat-icon svgIcon=\"{{toolbarItem.svg}}\" class=\"content-pre-toolbar-button-icon\"></mat-icon>\n          </button>\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>              \n      <div class=\"content-toolbar-title\">\n        <!-- <mat-icon svgIcon=\"{{toobarTitleIcon}}\" class=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></mat-icon> -->\n        <svg-icon [name]=\"toobarTitleIcon\" svgClass=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></svg-icon>\n        {{toobarTitle}}\n      </div>\n      \n      <ng-content></ng-content>\n    <span class=\"content-toolbar-divider\"></span>\n    \n    <ng-container *ngIf=\"toolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of toolbarItems\">\n        \n        <ng-container *ngIf=\"toolbarItem.children\">\n          <button aria-label=\"Button\" [matMenuTriggerFor]=\"toolbarChildMenu\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\"  matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n          <mat-menu #toolbarChildMenu>\n            <ng-container *ngFor=\"let childToolbarItem of toolbarItem.children\">\n              <button aria-label=\"button\" mat-menu-item [routerLink]=\"childToolbarItem.link ? childToolbarItem.link : null\" (click)=\"[childToolbarItem.click ? onToolbarItemClick(childToolbarItem.click, childToolbarItem.click_paramters) : null]\">\n                <mat-icon [svgIcon]=\"childToolbarItem.svg\" class=\"content-toolbar-menu-item-icon\"></mat-icon>\n                <span>{{childToolbarItem.caption}}</span>\n              </button>\n            </ng-container>\n          </mat-menu>\n        </ng-container>\n\n        <ng-container *ngIf=\"!toolbarItem.children\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n        </ng-container>\n\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>\n  </mat-toolbar-row>\n</mat-toolbar> ",
+                    styles: [".content-toolbar{background-color:transparent!important;min-height:32px!important;max-height:32px!important;margin-bottom:14px}.content-toolbar-row{padding:0}.content-pre-toolbar-button{background-color:transparent!important;width:32px;height:32px;min-width:unset!important;padding:0!important;margin-right:10px!important}.content-pre-toolbar-button-icon{margin-bottom:8px;width:20px;fill:var(--default-toolbar-iconcolor-nobackground)}.content-toolbar-title{font-size:large;font-weight:600;color:var(--default-pagecaption-textcolor);display:flex}.content-toolbar-title-icon{height:20px;width:20px;margin-right:8px;margin-top:5px;fill:var(--default-pagecaption-iconcolor)}.content-toolbar-divider{flex:1 1 auto}.content-toolbar-button{background-color:var(--default-toolbar-iconcolor-withbackground)!important;width:32px;height:32px;min-width:unset!important;padding:0!important;margin-left:8px!important}.content-toolbar-button-icon{pointer-events:none;fill:var(--default-toolbar-iconcolor);width:16px;height:16px;margin-top:6px}.content-toolbar-menu-item-icon{fill:var(--default-popup-iconcolor)}"]
+                },] }
+    ];
+    ContentToolbarComponent.ctorParameters = function () { return []; };
+    ContentToolbarComponent.propDecorators = {
+        toobarEnabled: [{ type: core.Input }],
+        preToolbarItems: [{ type: core.Input }],
+        toobarTitleIcon: [{ type: core.Input }],
+        toobarTitle: [{ type: core.Input }],
+        toolbarItems: [{ type: core.Input }],
+        ToolbarItemClick: [{ type: core.Output }]
+    };
+
+    var MaterialElevationDirective = /** @class */ (function () {
+        function MaterialElevationDirective(element, renderer) {
+            this.element = element;
+            this.renderer = renderer;
+            this.defaultElevation = 0;
+            this.raisedElevation = 8;
+            this.setElevation(this.defaultElevation);
         }
-        else {
-            cooked.raw = raw;
+        MaterialElevationDirective.prototype.ngOnChanges = function (_changes) {
+            this.setElevation(this.defaultElevation);
+        };
+        MaterialElevationDirective.prototype.onMouseEnter = function () {
+            this.setElevation(this.raisedElevation);
+        };
+        MaterialElevationDirective.prototype.onMouseLeave = function () {
+            this.setElevation(this.defaultElevation);
+        };
+        MaterialElevationDirective.prototype.setElevation = function (amount) {
+            var _this = this;
+            var classesToRemove = Array.from(this.element.nativeElement.classList).filter(function (c) { return c.startsWith('mat-elevation-z'); });
+            classesToRemove.forEach(function (c) {
+                _this.renderer.removeClass(_this.element.nativeElement, c);
+            });
+            var newClass = "mat-elevation-z" + amount;
+            this.renderer.addClass(this.element.nativeElement, newClass);
+        };
+        return MaterialElevationDirective;
+    }());
+    MaterialElevationDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[appMaterialElevation]'
+                },] }
+    ];
+    MaterialElevationDirective.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: core.Renderer2 }
+    ]; };
+    MaterialElevationDirective.propDecorators = {
+        defaultElevation: [{ type: core.Input }],
+        raisedElevation: [{ type: core.Input }],
+        onMouseEnter: [{ type: core.HostListener, args: ['mouseenter',] }],
+        onMouseLeave: [{ type: core.HostListener, args: ['mouseleave',] }]
+    };
+
+    var ProfilePageComponent = /** @class */ (function () {
+        function ProfilePageComponent(coreService) {
+            this.coreService = coreService;
+            this.isSystemUser = false;
+            this.isEmployee = false;
+            this.isCustomerUser = false;
+            this.isVendorUser = false;
         }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
+        ProfilePageComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isSystemUser = p === null || p === void 0 ? void 0 : p.isOrganizationUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isEmployee = p === null || p === void 0 ? void 0 : p.isEmployeeUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isCustomerUser = p === null || p === void 0 ? void 0 : p.isCustomerUser; });
+            this.coreService.mobiUserProfileObservable.subscribe(function (p) { return _this.isVendorUser = p === null || p === void 0 ? void 0 : p.isVendorUser; });
+        };
+        return ProfilePageComponent;
+    }());
+    ProfilePageComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'mobicloud-profile-page',
+                    template: "<div class=\"profile-container\">    \n\n    <mobicloud-profile-page-system-user *ngIf=\"isSystemUser\"></mobicloud-profile-page-system-user>\n    <mobicloud-profile-page-employee *ngIf=\"isEmployee\"></mobicloud-profile-page-employee>\n    <mobicloud-profile-page-customer-user *ngIf=\"isCustomerUser\"></mobicloud-profile-page-customer-user>\n    <mobicloud-profile-page-vendor-user *ngIf=\"isVendorUser\"></mobicloud-profile-page-vendor-user>\n\n</div>\n",
+                    styles: [".profile-container{margin:20px 20px 10px}"]
+                },] }
+    ];
+    ProfilePageComponent.ctorParameters = function () { return [
+        { type: mobicloudCore.MobicloudCoreService }
+    ]; };
 
     var ProfilePageSystemUserComponent = /** @class */ (function () {
         function ProfilePageSystemUserComponent(route, coreService, cloudDataService, router, location) {
@@ -1946,12 +2049,15 @@
         EmployeeProfileImageComponent.prototype.onRetryClick = function () {
             this.imageEdit.upload();
         };
+        EmployeeProfileImageComponent.prototype.isUploadedChange = function (success) {
+            this.coreService.fetchProfileDetails();
+        };
         return EmployeeProfileImageComponent;
     }());
     EmployeeProfileImageComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'mobicloud-employee-profile-image',
-                    template: "<mobicloud-group-box title=\"Profile Image\" i18n-title=\"@@CaptionHeader-ProfileImage\" [width]=\"[width]\" [contentheight]=\"0\" class=\"employeeProfileImageForm\" [isLoadingData]=\"isLoadingData\" [loadingText]=\"loadingText\" \n   [editAllowed]=\"editAllowed\" [inEditMode]=\"inEditMode\" [hasErrors]=\"hasErrors\" errorCaption=\"Error\" i18n-errorCaption=\"@@CaptionHeader-Error\" [errorText]=\"errorText\" [enableRetryOnError]=\"true\"\n    (Edit_Click)=\"onEditClick()\" (Save_Click)=\"onSaveClick()\" (CancelEdit_Click)=\"onCancelEditClick()\" (Retry_Click)=\"onRetryClick()\">\n\n    <mobicloud-image-edit #imageEdit id=\"imageEdit\" [uploadUrl]=\"uploadUrl\" [imageUrl]=\"getProfileImageUrl()\" [width]=\"width - 20\" \n  [(inEditMode)]=\"inEditMode\" [(isUploading)]=\"isLoadingData\" [(isUploaded)]=\"isUploaded\" [(uploadError)]=\"hasErrors\" [(uploadErrorMessage)]=\"errorText\"></mobicloud-image-edit>\n\n  <!-- <p>url: {{uploadUrl}}</p>\n  <p>inEditMode: {{inEditMode}}</p>\n  <p>isLoadingData: {{isLoadingData}}</p>\n  <p>isUploaded: {{isUploaded}}</p>\n  <p>hasErrors: {{hasErrors}}</p>\n  <p>errorText: {{errorText}}</p>   -->\n</mobicloud-group-box>",
+                    template: "<mobicloud-group-box title=\"Profile Image\" i18n-title=\"@@CaptionHeader-ProfileImage\" [width]=\"[width]\" [contentheight]=\"0\" class=\"employeeProfileImageForm\" [isLoadingData]=\"isLoadingData\" [loadingText]=\"loadingText\" \n   [editAllowed]=\"editAllowed\" [inEditMode]=\"inEditMode\" [hasErrors]=\"hasErrors\" errorCaption=\"Error\" i18n-errorCaption=\"@@CaptionHeader-Error\" [errorText]=\"errorText\" [enableRetryOnError]=\"true\"\n    (Edit_Click)=\"onEditClick()\" (Save_Click)=\"onSaveClick()\" (CancelEdit_Click)=\"onCancelEditClick()\" (Retry_Click)=\"onRetryClick()\">\n\n    <mobicloud-image-edit #imageEdit id=\"imageEdit\" [uploadUrl]=\"uploadUrl\" [imageUrl]=\"getProfileImageUrl()\" [width]=\"width - 20\" \n  [(inEditMode)]=\"inEditMode\" [(isUploading)]=\"isLoadingData\" [(isUploaded)]=\"isUploaded\" [(uploadError)]=\"hasErrors\" [(uploadErrorMessage)]=\"errorText\" (isUploadedChange)=\"isUploadedChange($event)\"></mobicloud-image-edit>\n\n  <!-- <p>url: {{uploadUrl}}</p>\n  <p>inEditMode: {{inEditMode}}</p>\n  <p>isLoadingData: {{isLoadingData}}</p>\n  <p>isUploaded: {{isUploaded}}</p>\n  <p>hasErrors: {{hasErrors}}</p>\n  <p>errorText: {{errorText}}</p>   -->\n</mobicloud-group-box>",
                     styles: [""]
                 },] }
     ];
@@ -2976,12 +3082,15 @@
         CustomerUserImageComponent.prototype.onRetryClick = function () {
             this.imageEdit.upload();
         };
+        CustomerUserImageComponent.prototype.isUploadedChange = function (success) {
+            this.coreService.fetchProfileDetails();
+        };
         return CustomerUserImageComponent;
     }());
     CustomerUserImageComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'mobicloud-customer-user-image',
-                    template: "<mobicloud-group-box title=\"Profile Image\" i18n-title=\"@@CaptionHeader-ProfileImage\" [width]=\"[width]\" [contentheight]=\"0\" class=\"customerUserProfileImageForm\" [isLoadingData]=\"isLoadingData\" [loadingText]=\"loadingText\" \n   [editAllowed]=\"editAllowed\" [inEditMode]=\"inEditMode\" [hasErrors]=\"hasErrors\" errorCaption=\"Error\" i18n-errorCaption=\"@@CaptionHeader-Error\" [errorText]=\"errorText\" [enableRetryOnError]=\"true\"\n    (Edit_Click)=\"onEditClick()\" (Save_Click)=\"onSaveClick()\" (CancelEdit_Click)=\"onCancelEditClick()\" (Retry_Click)=\"onRetryClick()\">\n\n    <mobicloud-image-edit #imageEdit id=\"imageEdit\" [uploadUrl]=\"uploadUrl\" [imageUrl]=\"getProfileImageUrl()\" [width]=\"width - 20\" \n  [(inEditMode)]=\"inEditMode\" [(isUploading)]=\"isLoadingData\" [(isUploaded)]=\"isUploaded\" [(uploadError)]=\"hasErrors\" [(uploadErrorMessage)]=\"errorText\"></mobicloud-image-edit>\n\n  <!-- <p>url: {{uploadUrl}}</p>\n  <p>inEditMode: {{inEditMode}}</p>\n  <p>isLoadingData: {{isLoadingData}}</p>\n  <p>isUploaded: {{isUploaded}}</p>\n  <p>hasErrors: {{hasErrors}}</p>\n  <p>errorText: {{errorText}}</p>   -->\n</mobicloud-group-box>",
+                    template: "<mobicloud-group-box title=\"Profile Image\" i18n-title=\"@@CaptionHeader-ProfileImage\" [width]=\"[width]\" [contentheight]=\"0\" class=\"customerUserProfileImageForm\" [isLoadingData]=\"isLoadingData\" [loadingText]=\"loadingText\" \n   [editAllowed]=\"editAllowed\" [inEditMode]=\"inEditMode\" [hasErrors]=\"hasErrors\" errorCaption=\"Error\" i18n-errorCaption=\"@@CaptionHeader-Error\" [errorText]=\"errorText\" [enableRetryOnError]=\"true\"\n    (Edit_Click)=\"onEditClick()\" (Save_Click)=\"onSaveClick()\" (CancelEdit_Click)=\"onCancelEditClick()\" (Retry_Click)=\"onRetryClick()\">\n\n    <mobicloud-image-edit #imageEdit id=\"imageEdit\" [uploadUrl]=\"uploadUrl\" [imageUrl]=\"getProfileImageUrl()\" [width]=\"width - 20\" \n  [(inEditMode)]=\"inEditMode\" [(isUploading)]=\"isLoadingData\" [(isUploaded)]=\"isUploaded\" [(uploadError)]=\"hasErrors\" [(uploadErrorMessage)]=\"errorText\" (isUploadedChange)=\"isUploadedChange($event)\"></mobicloud-image-edit>\n\n  <!-- <p>url: {{uploadUrl}}</p>\n  <p>inEditMode: {{inEditMode}}</p>\n  <p>isLoadingData: {{isLoadingData}}</p>\n  <p>isUploaded: {{isUploaded}}</p>\n  <p>hasErrors: {{hasErrors}}</p>\n  <p>errorText: {{errorText}}</p>   -->\n</mobicloud-group-box>",
                     styles: [""]
                 },] }
     ];
@@ -3604,12 +3713,15 @@
         VendorUserImageComponent.prototype.onRetryClick = function () {
             this.imageEdit.upload();
         };
+        VendorUserImageComponent.prototype.isUploadedChange = function (success) {
+            this.coreService.fetchProfileDetails();
+        };
         return VendorUserImageComponent;
     }());
     VendorUserImageComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'mobicloud-vendor-user-image',
-                    template: "<mobicloud-group-box title=\"Profile Image\" i18n-title=\"@@CaptionHeader-ProfileImage\" [width]=\"[width]\" [contentheight]=\"0\" class=\"vendorUserProfileImageForm\" [isLoadingData]=\"isLoadingData\" [loadingText]=\"loadingText\" \n   [editAllowed]=\"editAllowed\" [inEditMode]=\"inEditMode\" [hasErrors]=\"hasErrors\" errorCaption=\"Error\" i18n-errorCaption=\"@@CaptionHeader-Error\" [errorText]=\"errorText\" [enableRetryOnError]=\"true\"\n    (Edit_Click)=\"onEditClick()\" (Save_Click)=\"onSaveClick()\" (CancelEdit_Click)=\"onCancelEditClick()\" (Retry_Click)=\"onRetryClick()\">\n\n    <mobicloud-image-edit #imageEdit id=\"imageEdit\" [uploadUrl]=\"uploadUrl\" [imageUrl]=\"getProfileImageUrl()\" [width]=\"width - 20\" \n  [(inEditMode)]=\"inEditMode\" [(isUploading)]=\"isLoadingData\" [(isUploaded)]=\"isUploaded\" [(uploadError)]=\"hasErrors\" [(uploadErrorMessage)]=\"errorText\"></mobicloud-image-edit>\n\n  <!-- <p>url: {{uploadUrl}}</p>\n  <p>inEditMode: {{inEditMode}}</p>\n  <p>isLoadingData: {{isLoadingData}}</p>\n  <p>isUploaded: {{isUploaded}}</p>\n  <p>hasErrors: {{hasErrors}}</p>\n  <p>errorText: {{errorText}}</p>   -->\n</mobicloud-group-box>",
+                    template: "<mobicloud-group-box title=\"Profile Image\" i18n-title=\"@@CaptionHeader-ProfileImage\" [width]=\"[width]\" [contentheight]=\"0\" class=\"vendorUserProfileImageForm\" [isLoadingData]=\"isLoadingData\" [loadingText]=\"loadingText\" \n   [editAllowed]=\"editAllowed\" [inEditMode]=\"inEditMode\" [hasErrors]=\"hasErrors\" errorCaption=\"Error\" i18n-errorCaption=\"@@CaptionHeader-Error\" [errorText]=\"errorText\" [enableRetryOnError]=\"true\"\n    (Edit_Click)=\"onEditClick()\" (Save_Click)=\"onSaveClick()\" (CancelEdit_Click)=\"onCancelEditClick()\" (Retry_Click)=\"onRetryClick()\">\n\n    <mobicloud-image-edit #imageEdit id=\"imageEdit\" [uploadUrl]=\"uploadUrl\" [imageUrl]=\"getProfileImageUrl()\" [width]=\"width - 20\" \n  [(inEditMode)]=\"inEditMode\" [(isUploading)]=\"isLoadingData\" [(isUploaded)]=\"isUploaded\" [(uploadError)]=\"hasErrors\" [(uploadErrorMessage)]=\"errorText\" (isUploadedChange)=\"isUploadedChange($event)\"></mobicloud-image-edit>\n\n  <!-- <p>url: {{uploadUrl}}</p>\n  <p>inEditMode: {{inEditMode}}</p>\n  <p>isLoadingData: {{isLoadingData}}</p>\n  <p>isUploaded: {{isUploaded}}</p>\n  <p>hasErrors: {{hasErrors}}</p>\n  <p>errorText: {{errorText}}</p>   -->\n</mobicloud-group-box>",
                     styles: [""]
                 },] }
     ];