@memberjunction/ng-explorer-core 0.9.79 → 0.9.116

package/dist/lib/navigation/navigation.component.js

@@ -1,1004 +1,1026 @@
-var __awaiter = (this && this.__awaiter) || function (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());
-    });
-};
-import { Component, ElementRef, ViewChild, HostListener, HostBinding, Input } from '@angular/core';
-import { NavigationEnd, NavigationSkipped } from '@angular/router';
-import { DrawerComponent } from "@progress/kendo-angular-layout";
-import { Metadata, RunView, LogError } from '@memberjunction/core';
-import { MJEventType, MJGlobal } from '@memberjunction/global';
-import { EventCodes } from '../../shared/shared.service';
-import { BaseResourceComponent, ResourceData } from '../generic/base-resource-component';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/router";
-import * as i2 from "../../shared/shared.service";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/platform-browser";
-import * as i5 from "@progress/kendo-angular-indicators";
-import * as i6 from "@progress/kendo-angular-layout";
-import * as i7 from "@progress/kendo-angular-icons";
-import * as i8 from "@memberjunction/ng-container-directives";
-import * as i9 from "../generic/resource-container-component";
-const _c0 = ["drawerWrapper"];
-const _c1 = ["tabstrip"];
-const _c2 = ["container"];
-function NavigationComponent_kendo_loader_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-loader", 5);
-} }
-function NavigationComponent_kendo_drawer_container_3_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-icon", 15);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_ng_template_7_Template_kendo_icon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.onTabContextMenu($event, 0)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "span", 16);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_ng_template_7_Template_span_contextmenu_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.onTabContextMenu($event, 0)); });
-    i0.ɵɵtext(2, "Home");
-    i0.ɵɵelementEnd();
-} }
-function NavigationComponent_kendo_drawer_container_3_ng_template_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "router-outlet");
-} }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-icon", 17);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template_kendo_icon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r18); const i_r13 = i0.ɵɵnextContext().index; const ctx_r16 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r16.onTabContextMenu($event, i_r13)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "kendo-icon", 18);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template_kendo_icon_contextmenu_1_listener($event) { i0.ɵɵrestoreView(_r18); const i_r13 = i0.ɵɵnextContext().index; const ctx_r19 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r19.onTabContextMenu($event, i_r13)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 16);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template_span_contextmenu_2_listener($event) { i0.ɵɵrestoreView(_r18); const i_r13 = i0.ɵɵnextContext().index; const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.onTabContextMenu($event, i_r13)); });
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const tab_r12 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵstyleProp("display", (tab_r12 == null ? null : tab_r12.contentLoading) ? "inline" : "none");
-    i0.ɵɵadvance(1);
-    i0.ɵɵstyleProp("display", !(tab_r12 == null ? null : tab_r12.contentLoading) && (tab_r12 == null ? null : tab_r12.icon) ? "inline" : "none");
-    i0.ɵɵproperty("name", tab_r12.icon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(tab_r12.labelLoading ? "Loading..." : tab_r12.label);
-} }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-resource", 19);
-    i0.ɵɵlistener("ResourceRecordSaved", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template_app_resource_ResourceRecordSaved_0_listener() { i0.ɵɵrestoreView(_r26); const tab_r12 = i0.ɵɵnextContext().$implicit; const ctx_r24 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r24.SaveSingleWorkspaceItem(tab_r12)); })("ContentLoadingStarted", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template_app_resource_ContentLoadingStarted_0_listener() { i0.ɵɵrestoreView(_r26); const tab_r12 = i0.ɵɵnextContext().$implicit; const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.setTabContentLoadingStatus(tab_r12, true)); })("ContentLoadingComplete", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template_app_resource_ContentLoadingComplete_0_listener() { i0.ɵɵrestoreView(_r26); const tab_r12 = i0.ɵɵnextContext().$implicit; const ctx_r29 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r29.setTabContentLoadingStatus(tab_r12, false)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const tab_r12 = i0.ɵɵnextContext().$implicit;
-    const ctx_r15 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Data", tab_r12.data)("isVisible", (tab_r12 == null ? null : tab_r12.id) === ctx_r15.getActiveTabId());
-} }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 11);
-    i0.ɵɵtemplate(1, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template, 4, 6, "ng-template", 12);
-    i0.ɵɵtemplate(2, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template, 1, 2, "ng-template", 13);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const tab_r12 = ctx.$implicit;
-    const ctx_r8 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("selected", ctx_r8.isTabActive(tab_r12.id))("closable", true);
-} }
-function NavigationComponent_kendo_drawer_container_3_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-drawer-container")(1, "kendo-drawer", 6, 7);
-    i0.ɵɵlistener("select", function NavigationComponent_kendo_drawer_container_3_Template_kendo_drawer_select_1_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r32 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r32.onDrawerSelect($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "kendo-drawer-content", 8)(4, "kendo-tabstrip", 9, 10);
-    i0.ɵɵlistener("tabClose", function NavigationComponent_kendo_drawer_container_3_Template_kendo_tabstrip_tabClose_4_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r34 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r34.onClose($event)); })("tabSelect", function NavigationComponent_kendo_drawer_container_3_Template_kendo_tabstrip_tabSelect_4_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r35 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r35.onTabSelect($event)); });
-    i0.ɵɵelementStart(6, "kendo-tabstrip-tab", 11);
-    i0.ɵɵtemplate(7, NavigationComponent_kendo_drawer_container_3_ng_template_7_Template, 3, 0, "ng-template", 12);
-    i0.ɵɵtemplate(8, NavigationComponent_kendo_drawer_container_3_ng_template_8_Template, 1, 0, "ng-template", 13);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_Template, 3, 2, "kendo-tabstrip-tab", 14);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("items", ctx_r2.drawerItems)("mode", ctx_r2.mode)("mini", ctx_r2.mini)("animation", false)("autoCollapse", false);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("scrollable", true)("keepTabContent", true)("animate", false);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("selected", ctx_r2.activeTabIndex === 0)("closable", false);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", ctx_r2.tabs);
-} }
-function NavigationComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-    const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
-    i0.ɵɵlistener("click", function NavigationComponent_div_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.handleContextMenuOption(1)); });
-    i0.ɵɵtext(2, "Close All");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 21);
-    i0.ɵɵlistener("click", function NavigationComponent_div_4_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r37); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.handleContextMenuOption(2)); });
-    i0.ɵɵtext(4, "Close Others");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 21);
-    i0.ɵɵlistener("click", function NavigationComponent_div_4_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r37); const ctx_r39 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r39.handleContextMenuOption(3)); });
-    i0.ɵɵtext(6, "Close Tabs to the Right");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", ctx_r3.contextMenuStyle);
-} }
-const _c3 = function (a0) { return { "waiting": a0 }; };
-export class NavigationComponent {
-    onWindowResize() {
-        clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = setTimeout(() => {
-            this.checkViewportSize();
-        }, 200); // Adjust the debounce time as needed
-    }
-    onClick() {
-        this.contextMenuVisible = false;
-    }
-    // Inject the authentication service into your component through the constructor
-    constructor(router, route, sharedService, location, renderer, titleService) {
-        this.router = router;
-        this.route = route;
-        this.sharedService = sharedService;
-        this.location = location;
-        this.renderer = renderer;
-        this.titleService = titleService;
-        this.drawerItems = [{
-                text: 'Loading...',
-                icon: 'k-i-apps',
-            }];
-        this.mode = 'push';
-        this.mini = true;
-        this.viewsList = [];
-        this.selectedDrawerItem = null;
-        this.selectedApp = null;
-        this.selectedEntity = null;
-        this.selectedView = null;
-        this.loading = true;
-        this.loader = false;
-        this.tabs = [];
-        this.closedTabs = []; // should always be empty after using it
-        this.tabQueryParams = {};
-        this.activeTabIndex = 0;
-        this.selectedTabIndex = 0;
-        this.workSpace = {};
-        this.workSpaceItems = [];
-        this.routeSub = null;
-        this.isMobileScreen = false;
-        this.contextMenuStyle = {};
-        this.contextMenuVisible = false;
-        this._loggedIn = false;
-        this._earlyEvents = [];
-        this.gotFirstNav = false;
-        this._mostRecentURL = '';
-        this.tabs = [];
-    }
-    onTabContextMenu(event, tab) {
-        event.preventDefault();
-        this.selectedTabIndex = tab;
-        const mouseEvent = event;
-        const mouseX = mouseEvent.clientX;
-        const mouseY = mouseEvent.clientY;
-        this.contextMenuStyle = {
-            top: mouseY + 'px',
-            left: mouseX + 'px'
-        };
-        this.contextMenuVisible = true;
-    }
-    handleContextMenuOption(option) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.closedTabs = [];
-            switch (option) {
-                case 1:
-                    // Close All
-                    this.closedTabs = this.closedTabs.concat(this.tabs);
-                    this.tabs = [];
-                    break;
-                case 2:
-                    // Close Others
-                    this.closedTabs = this.tabs.filter((tab, id) => id !== this.selectedTabIndex);
-                    this.tabs = [this.tabs[this.selectedTabIndex]];
-                    if (this.activeTabIndex > 1)
-                        this.activeTabIndex = 1;
-                    break;
-                case 3:
-                    // Close Tabs to the Right
-                    this.activeTabIndex = this.selectedTabIndex + 1;
-                    this.closedTabs = this.closedTabs.concat(this.tabs.slice(this.activeTabIndex));
-                    this.tabs = this.tabs.slice(0, this.selectedTabIndex + 1);
-                    break;
-                default:
-                    // Handle other options if needed
-                    break;
-            }
-            this.contextMenuVisible = false;
-            for (let i = 0; i < this.closedTabs.length; ++i) {
-                const tab = this.closedTabs[i];
-                yield this.removeWorkspaceItem(tab);
-            }
-            this.activeTabIndex = 0;
-            this.tabstrip.selectTab(this.activeTabIndex);
-            // in this situation we have the home tab showing, so we need to update the URL path based on what's selected in the drawer
-            let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
-            this.router.navigate([url]);
-            //this.location.go(url); // update the browser URL if needed  
-            this._mostRecentURL = url;
-        });
-    }
-    checkViewportSize() {
-        this.isMobileScreen = window.innerWidth <= 840;
-    }
-    ngAfterViewInit() {
-        MJGlobal.Instance.GetEventListener(true) // true gets us replay of past events so we can "catch up" as needed
-            .subscribe(event => {
-            this.handleEvent(event, event.args);
-        });
-        this.route.queryParams.subscribe(params => {
-            // what we want to do here is CACHE the params for the CURRENT tab so we have them 
-            // to throw back in the URL whenever the tab gets clicked on again in the future
-            this.tabQueryParams['tab_' + this.activeTabIndex] = params;
-        });
-    }
-    handleEvent(event, args) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // event handler
-            switch (event.event) {
-                case MJEventType.LoggedIn:
-                    yield this.loadApp();
-                    yield this.getWorkspace();
-                    this._loggedIn = true;
-                    // check for early events and replay them now that we're logged in
-                    for (let i = 0; i < this._earlyEvents.length; ++i) {
-                        const e = this._earlyEvents[i];
-                        this.handleEvent(e.event, e.args); // recursve call to handle the event
-                    }
-                    this._earlyEvents.length = 0; // clear the array
-                    // resize everything after a short delay
-                    setTimeout(() => {
-                        this.sharedService.InvokeManualResize();
-                    }, 100);
-                    this.checkForBaseURL();
-                    break;
-                case MJEventType.ComponentEvent:
-                    if (!this._loggedIn) {
-                        // we're not logged in yet, so queue up the event to be handled later
-                        this._earlyEvents.push({ event, args });
-                    }
-                    else {
-                        // we're logged in so go ahead and handle normally
-                        switch (event.eventCode) {
-                            case EventCodes.ViewNotifications:
-                                this.setActiveTabToHome();
-                                break;
-                            case EventCodes.ViewCreated:
-                            case EventCodes.AddDashboard:
-                            case EventCodes.AddReport:
-                            case EventCodes.EntityRecordClicked:
-                            case EventCodes.ViewClicked:
-                            case EventCodes.ViewClicked:
-                            case EventCodes.RunSearch:
-                                // another component requested that we add something to our tab structure
-                                this.AddOrSelectTab(event.args);
-                                break;
-                            default:
-                                break;
-                        }
-                    }
-                    break;
-                default:
-                    break;
-            }
-        });
-    }
-    ngOnInit() {
-        this.checkViewportSize();
-        // Subscribe to route changes
-        this.routeSub = this.router.events.pipe().subscribe((args) => {
-            if (args instanceof NavigationEnd || args instanceof PopStateEvent) {
-                const trigger = args.navigationTrigger;
-                switch (trigger) {
-                    case 'imperative':
-                        // this is a programmatic navigation, so we don't want to do anything here
-                        break;
-                    case 'popstate':
-                        // this is a browser back/forward navigation, so we want to do something here
-                        // when the route changes and it maps to one of our drawer items, select it
-                        this.NavigateFromUrl();
-                        break;
-                    default:
-                        // this is a click on a link, so we want to do something here
-                        // when the route changes and it maps to one of our drawer items, select it
-                        this.NavigateFromUrl();
-                        break;
-                }
-            }
-            else if (args instanceof NavigationSkipped) {
-                // check to see if the route in args is truly the same as the this.route
-                // if so, then we're navigating to the same route and we don't want to do anything
-                // if not, then we're navigating to a different route and we want to do something
-                if (this._mostRecentURL.trim().toLowerCase() != args.url.trim().toLowerCase()) {
-                    this.NavigateFromUrl();
-                }
-            }
-        });
-    }
-    NavigateFromUrl() {
-        return __awaiter(this, void 0, void 0, function* () {
-            let url = this.router.url.trim().toLowerCase();
-            if (url === '/') {
-                this._mostRecentURL = '/home';
-                this.router.navigate(['/home']); // redirect to /home
-                this.gotFirstNav = true;
-            }
-            else {
-                this._mostRecentURL = this.router.url;
-                // see if this matches a drawer item or not
-                const di = this.drawerItems;
-                //const item = di.find(i => (<any>i).path.toLowerCase().trim() === url.toLowerCase().trim());
-                const item = di.find(i => url.toLowerCase().trim().startsWith(i.path.toLowerCase().trim()));
-                if (item) {
-                    this.selectDrawerItem(this.drawerItems.indexOf(item));
-                    this.gotFirstNav = true;
-                }
-            }
-            if (this.activeTabIndex > 0) {
-                // check to see if there are query params on the url and if so, stash em in the tabQueryParams array so we can restore the full set of query params later if we
-                // come back to this tab
-                const urlParts = this.router.url.split('?');
-                if (urlParts.length > 1) {
-                    // we have query params, so stash em
-                    const params = new URLSearchParams(urlParts[1]);
-                    const keys = params.keys();
-                    const queryParams = {};
-                    for (const key of keys) {
-                        queryParams[key] = params.get(key);
-                    }
-                    this.tabQueryParams['tab_' + this.activeTabIndex] = queryParams;
-                }
-            }
-        });
-    }
-    selectDrawerItem(index) {
-        this.selectedDrawerItem = this.drawerItems[index];
-        // Get the <ul> element that contains the <li> elements
-        const ulElement = this.drawerWrapper.nativeElement.querySelector('ul');
-        if (ulElement) {
-            // Get the <li> element at the specified index
-            const liElement = ulElement.children[index];
-            // add the k-selected class to the <li> element
-            this.renderer.addClass(liElement, 'k-selected');
-            // and remove k-selected from all other <li> within the <ul>
-            for (let i = 0; i < ulElement.children.length; ++i) {
-                if (i !== index)
-                    this.renderer.removeClass(ulElement.children[i], 'k-selected');
-            }
-        }
-        // make sure that the first tab is selected since this is showing stuff in the Home/Nav tab
-        this.setActiveTabToHome();
-    }
-    setActiveTabToHome() {
-        if (this.activeTabIndex !== 0) {
-            this.activeTabIndex = 0;
-            this.tabstrip.selectTab(0);
-            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
-        }
-    }
-    checkForBaseURL() {
-        setTimeout(() => {
-            // this is a hack to get the first navigation to work correctly when the route is to the / base URL that doesn't seem to trigger the rest of our code like all other routes
-            if (!this.gotFirstNav) {
-                this.gotFirstNav = true;
-                this.NavigateFromUrl();
-            }
-        }, 10);
-    }
-    getWorkspace() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            const rv = new RunView();
-            const workspaceParams = {
-                EntityName: "Workspaces",
-                ExtraFilter: `UserID=${md.CurrentUser.ID}`
-            };
-            const workspaces = yield rv.RunView(workspaceParams);
-            if (workspaces.Success) {
-                const workspaceRecord = yield md.GetEntityObject("Workspaces");
-                if (workspaces.Results.length) {
-                    const workspace = workspaces.Results.find((workspace) => workspace.UserID === md.CurrentUser.ID);
-                    yield workspaceRecord.Load(workspace.ID);
-                }
-                else {
-                    workspaceRecord.NewRecord();
-                    workspaceRecord.Name = `${md.CurrentUser.Name || md.CurrentUser.ID}'s Workspace`;
-                    workspaceRecord.UserID = md.CurrentUser.ID;
-                    yield workspaceRecord.Save();
-                }
-                this.workSpace = workspaceRecord;
-                const workspaceItemParams = {
-                    EntityName: "Workspace Items",
-                    ExtraFilter: `WorkspaceID='${this.workSpace.ID}'`
-                };
-                const workspaceItems = yield rv.RunView(workspaceItemParams);
-                if (workspaceItems.Success) {
-                    this.workSpaceItems = workspaceItems.Results;
-                    yield this.LoadWorkSpace();
-                }
-            }
-        });
-    }
-    LoadWorkSpace() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            this.tabs = []; // first clear out the tabs - this is often already the state but in case this is a full refresh, make sure we do this.
-            this.workSpaceItems.forEach((item, index) => __awaiter(this, void 0, void 0, function* () {
-                const itemData = item.Configuration ? JSON.parse(item.Configuration) : {};
-                const resourceData = new ResourceData({
-                    ID: item.ID,
-                    Name: item.Name,
-                    ResourceTypeID: item.ResourceTypeID,
-                    ResourceRecordID: item.ResourceRecordID,
-                    Configuration: itemData,
-                });
-                const newTab = {
-                    id: item.ID,
-                    labelLoading: true,
-                    contentLoading: false,
-                    data: resourceData,
-                    workspaceItem: null,
-                    icon: resourceData.ResourceIcon
-                };
-                this.tabs.push(newTab);
-                setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                    // non-blocking, load dynamically
-                    newTab.label = yield this.GetWorkspaceItemDisplayName(resourceData);
-                    newTab.labelLoading = false;
-                    if (newTab === this.tabs[this.activeTabIndex - 1]) // subtract one since the activeTabIndex is relative to the full set of tabs and the this.tabs array doesn't include the HOME tab
-                        this.setAppTitle(newTab.label);
-                }), 10);
-            }));
-        });
-    }
-    setAppTitle(title = '') {
-        if (title === '')
-            this.titleService.setTitle(this.applicationName);
-        else
-            this.titleService.setTitle(title + ' (' + this.applicationName + ')');
-    }
-    checkForExistingTab(data) {
-        let existingTab;
-        if (data.ResourceType.trim().toLowerCase() === 'search results') {
-            // we have a different matching logic for search results because we want to match on the search input as well as the entity
-            existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
-                t.data.Configuration.Entity === data.Configuration.Entity &&
-                t.data.Configuration.SearchInput === data.Configuration.SearchInput);
-        }
-        else if (data.ResourceType.trim().toLowerCase() === 'user views') {
-            // a viwe can be either saved (where we have a view id) or dyanmic (where we have an entity name, and optionally, an extra filter)
-            if (data.ResourceRecordID) {
-                // saved view
-                existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
-                    t.data.ResourceRecordID === data.ResourceRecordID &&
-                    data.ResourceRecordID !== null &&
-                    data.ResourceRecordID !== undefined // make sure that we don't match on null/undefined ResourceRecordID's - these should always be NEW tabs
-                );
-            }
-            else {
-                // dynamic view, compare entity name and if we have extra filter use that for comparison too
-                existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
-                    t.data.Configuration.Entity === data.Configuration.Entity &&
-                    t.data.Configuration.ExtraFilter === data.Configuration.ExtraFilter);
-            }
-        }
-        else {
-            existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
-                t.data.ResourceRecordID === data.ResourceRecordID &&
-                data.ResourceRecordID // make sure that we don't match on null/undefined ResourceRecordID's - these should always be NEW tabs
-            );
-        }
-        return existingTab;
-    }
-    AddOrSelectTab(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const t = this.tabs;
-            this.loader = true;
-            const existingTab = this.checkForExistingTab(data);
-            if (existingTab) {
-                const index = this.tabs.indexOf(existingTab);
-                this.activeTabIndex = index + 1; // add one because the HOME tab is not in the tabs array but it IS part of our tab structure
-                this.tabstrip.selectTab(this.activeTabIndex);
-                this.scrollIntoView();
-                if (existingTab.label)
-                    this.setAppTitle(existingTab.label);
-                else
-                    this.setAppTitle();
-                this.loader = false;
-            }
-            else {
-                const newTab = {
-                    id: -1,
-                    data: data,
-                    labelLoading: true,
-                    contentLoading: false,
-                    workspaceItem: null,
-                    icon: data.ResourceIcon,
-                };
-                // save it before we push to the tabs colleciton because we want the WorkspaceItem ID to be populated in the tab.id before we initialize the new tab by adding it to the this.tabs array
-                yield this.SaveSingleWorkspaceItem(newTab);
-                // now add to data structure
-                this.tabs.push(newTab);
-                // select the new tab
-                this.activeTabIndex = this.tabs.length; // this is intentionally past array boundary because ActiveTabIndex includes the Home tab that is not part of the tabs array
-                this.tabstrip.selectTab(this.activeTabIndex);
-                //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
-                this.sharedService.InvokeManualResize();
-                this.scrollIntoView();
-                setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                    // non-blocking this way
-                    newTab.label = yield this.GetWorkspaceItemDisplayName(data); // do this after we fire up the loading so that we don't block anything
-                    this.setAppTitle(newTab.label);
-                    newTab.labelLoading = false;
-                    this.loader = false;
-                }), 10);
-            }
-        });
-    }
-    updateBrowserURL(tab, data) {
-        // update the URL to reflect the current tab
-        var _a;
-        // FIRST, construct the base URL based on the resource type
-        const rt = this.sharedService.ResourceTypeByID(data.ResourceTypeID);
-        let url = '/resource';
-        switch (rt === null || rt === void 0 ? void 0 : rt.Name.toLowerCase().trim()) {
-            case 'user views':
-                if (data.ResourceRecordID && !isNaN(data.ResourceRecordID) && data.ResourceRecordID > 0) {
-                    url += `/view/${data.ResourceRecordID}`;
-                }
-                else if ((_a = data.Configuration) === null || _a === void 0 ? void 0 : _a.Entity) {
-                    // we don't have a view id. This can occur when we're referring to a dyanmic view where our data.Configuration.Entity is set and data.Configuration.ExtraFilter is set
-                    // so we need to construct a URL that will load up the dynamic view
-                    url += `/view/0?Entity=${data.Configuration.Entity}&ExtraFilter=${data.Configuration.ExtraFilter}`;
-                }
-                else {
-                    // we don't have a view ID and we also don't have an entity name, so this is an error condition
-                    LogError(`Invalid view configuration. No view ID or entity name specified.`);
-                    this.sharedService.CreateSimpleNotification(`Invalid view configuration. No view ID or entity name specified.`, "error", 5000);
-                    return;
-                }
-                break;
-            case 'dashboards':
-                url += `/dashboard/${data.ResourceRecordID}`;
-                break;
-            case 'reports':
-                url += `/report/${data.ResourceRecordID}`;
-                break;
-            case 'records':
-                url += `/record/${data.ResourceRecordID}?Entity=${data.Configuration.Entity}`;
-                break;
-            case 'search results':
-                url += `/search/${data.Configuration.SearchInput}?Entity=${data.Configuration.Entity}`;
-                break;
-            case 'settings':
-                url += `/settings`;
-                break;
-            case 'notifications':
-                url += `/notifications`;
-                break;
-        }
-        // SECOND, we need to, in some cases, append query params that the TAB had created, we don't know what those are, they could be anything. In the AfterViewInit() code above we cache
-        //         these whenever they change for each tab.
-        // Split the URL into the path and existing query params
-        const [path, existingQuery] = url.split('?');
-        // Create a URLSearchParams object from the existing query params
-        const queryParams = new URLSearchParams(existingQuery);
-        // Your cached query params, assuming it's an object like { key1: 'value1', key2: 'value2' }
-        const tabIndex = this.tabs.indexOf(tab) + 1; // we add 1 Because the HOME tab is not in the array so we have to offset by 1 here for our data structure
-        const cachedQueryParams = this.tabQueryParams['tab_' + tabIndex]; // Replace with your actual method to get cached params
-        if (cachedQueryParams) {
-            // Merge cached query params if they don't already exist in the URL
-            const keys = Object.keys(cachedQueryParams);
-            for (const key of keys) {
-                if (!queryParams.has(key)) {
-                    queryParams.append(key, cachedQueryParams[key]);
-                }
-            }
-        }
-        // Construct the new URL with merged query params
-        const params = queryParams.toString();
-        const newUrl = `${path}${params && params.length > 0 ? '?' + queryParams.toString() : ''}`;
-        // Update the most recent URL
-        this._mostRecentURL = newUrl;
-        // Update the browser URL without triggering Angular navigation
-        //    this.location.go(newUrl);
-        this.router.navigateByUrl(newUrl); //, { skipLocationChange: true });
-        // Update the app title
-        this.setAppTitle(tab.label);
-    }
-    scrollIntoView() {
-        const containerElement = this.tabstrip.wrapper.nativeElement;
-        setTimeout(() => {
-            const newTabElement = containerElement.querySelector(`li:nth-child(${this.activeTabIndex + 1})`);
-            newTabElement.scrollIntoView({ inline: 'nearest' });
-        }, 200);
-    }
-    GetWorkspaceItemDisplayName(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, data.ResourceType);
-            if (resourceReg) {
-                const resource = new resourceReg.SubClass();
-                return yield resource.GetResourceDisplayName(data);
-            }
-            else
-                return `Workspace Item ${data.ID}`;
-        });
-    }
-    SaveWorkspace() {
-        return __awaiter(this, void 0, void 0, function* () {
-            let bSuccess = true;
-            for (let i = 0; i < this.tabs.length; ++i) {
-                const tab = this.tabs[i];
-                bSuccess = (yield this.SaveSingleWorkspaceItem(tab)) && bSuccess;
-            }
-            return bSuccess;
-        });
-    }
-    SaveSingleWorkspaceItem(tab) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                let index = this.tabs.indexOf(tab);
-                if (index < 0)
-                    index = this.tabs.length; // this situation occurs when the tab hasn't yet been added to the tabs collection so the index will be = the length of the tabs collection
-                const md = new Metadata();
-                let wsItem;
-                if (!tab.workspaceItem) {
-                    wsItem = (yield md.GetEntityObject('Workspace Items'));
-                    if (tab.data.ID && !isNaN(tab.data.ID) && tab.data.ID > 0)
-                        yield wsItem.Load(tab.data.ID);
-                    else {
-                        wsItem.NewRecord();
-                        wsItem.Name = tab.data.Name ? tab.data.Name : tab.data.ResourceType + ' Record:' + tab.data.ResourceRecordID;
-                        wsItem.WorkSpaceID = this.workSpace.ID;
-                        wsItem.ResourceTypeID = (_a = tab.data) === null || _a === void 0 ? void 0 : _a.ResourceTypeID;
-                    }
-                    tab.workspaceItem = wsItem;
-                }
-                else {
-                    wsItem = tab.workspaceItem;
-                }
-                wsItem.ResourceRecordID = tab.data.ResourceRecordID.toString();
-                wsItem.Sequence = index;
-                wsItem.Configuration = JSON.stringify(tab.data.Configuration); // JSON.stringify({ Entity: tab.data.Entity });
-                const result = yield wsItem.Save();
-                tab.id = wsItem.ID;
-                return result;
-            }
-            catch (err) {
-                LogError(err);
-                return false;
-            }
-        });
-    }
-    setTabContentLoadingStatus(tab, bLoading) {
-        tab.contentLoading = bLoading;
-    }
-    onClose(ev) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (ev.tab.selected) {
-                setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                    // find the closest tab to the one we just closed
-                    yield this.removeWorkspaceItem(this.tabs[ev.index - 1]);
-                    if (ev.index < this.tabs.length + 1) {
-                        // NOT the last tab, kendo by defulat will show the next tab, so let that be, but we need to update our routing info
-                        // dont need to update active tab index or call selectTab() here because kendo does this and activetab index stays the same since we're closing the tab
-                        const i = this.activeTabIndex > 0 ? this.activeTabIndex - 1 : 0;
-                        const tabs = this.tabs;
-                        const tab = tabs[i];
-                        if (tab) {
-                            const data = tab.data;
-                            this.updateBrowserURL(tab, data);
-                        }
-                    }
-                    else {
-                        if (ev.index > 1) {
-                            // the to-be-selected tab is a RESOURCE so do what's appropraite there
-                            this.activeTabIndex = ev.index - 1;
-                            this.tabstrip.selectTab(ev.index - 1);
-                            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
-                            const i = this.activeTabIndex > 0 ? this.activeTabIndex - 1 : 0;
-                            const tabs = this.tabs;
-                            const tab = tabs[i];
-                            if (tab) {
-                                const data = tab.data;
-                                this.updateBrowserURL(tab, data);
-                            }
-                        }
-                        else {
-                            // the tab that will be selected is the HOME tab o we need to update
-                            this.activeTabIndex = 0;
-                            this.tabstrip.selectTab(0);
-                            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
-                            // in this situation we have the home tab showing, so we need to update the URL path based on what's selected in the drawer
-                            let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
-                            this.router.navigate([url]);
-                            //this.location.go(url); // update the browser URL if needed  
-                            this._mostRecentURL = url;
-                        }
-                    }
-                }), 100);
-            }
-        });
-    }
-    removeWorkspaceItem(tab) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // remove the tab from the tabs collection
-            const index = this.tabs.indexOf(tab);
-            if (index >= 0)
-                this.tabs.splice(index, 1);
-            if (!tab.workspaceItem && tab.id && tab.id > 0) {
-                // we lazy load the workspaceItem entity objects, so we load it here so we can delete it below, but only when it wasn't already loaded
-                const md = new Metadata();
-                tab.workspaceItem = (yield md.GetEntityObject('Workspace Items'));
-                yield tab.workspaceItem.Load(tab.id);
-            }
-            if (tab.workspaceItem) {
-                if (!(yield tab.workspaceItem.Delete())) {
-                    // error deleting the workspace item, alert the user
-                    this.sharedService.CreateSimpleNotification('Error deleting workspace item ' + tab.workspaceItem.Name + ' from the database. Please contact your system administrator.', 'error', 5000);
-                }
-            }
-        });
-    }
-    onTabSelect(e) {
-        e.preventDefault();
-        if (this.activeTabIndex !== e.index) {
-            this.activeTabIndex = e.index;
-            this.sharedService.InvokeManualResize();
-            if (e.index === 0) {
-                let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
-                if (this.selectedDrawerItem !== null && this.selectedDrawerItem !== undefined)
-                    url = this.selectedDrawerItem.path;
-                this.router.navigate([url]);
-                //this.location.go(url); // update the browser URL if needed
-                this.setAppTitle();
-                this._mostRecentURL = url;
-            }
-            else {
-                const tab = this.tabs[e.index - 1];
-                if (tab) {
-                    this.setAppTitle(tab.label);
-                    const data = tab.data;
-                    this.updateBrowserURL(tab, data);
-                }
-            }
-        }
-    }
-    getActiveTabId() {
-        var _a;
-        if (this.activeTabIndex === 0) {
-            return null;
-        }
-        else // subtract 1 from the activeTabIndex if it is not the first tab since our data structure is for tabs 1 to n
-            return (_a = this.tabs[this.activeTabIndex - 1]) === null || _a === void 0 ? void 0 : _a.id;
-    }
-    isTabActive(tabId) {
-        return this.getActiveTabId() === tabId;
-    }
-    ngOnDestroy() {
-        // Clean up the subscription when the component is destroyed
-        clearTimeout(this.resizeTimeout);
-        if (this.routeSub)
-            this.routeSub.unsubscribe();
-        window.removeEventListener('resize', () => { });
-    }
-    onDrawerSelect(ev) {
-        this.selectedDrawerItem = ev.item;
-        this.router.navigate([ev.item.path]);
-        this._mostRecentURL = ev.item.path;
-        // make sure that the first tab is selected since this is showing stuff in the Home/Nav tab
-        if (this.activeTabIndex !== 0) {
-            this.activeTabIndex = 0;
-            this.tabstrip.selectTab(0);
-            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
-        }
-        this.setAppTitle(ev.item.text);
-    }
-    getEntityItemFromViewItem(viewItem) {
-        let entityItem = null;
-        for (let item of this.drawerItems) {
-            if (item.id == viewItem.parentId) {
-                // got the parent, this is the entity
-                return item;
-            }
-        }
-        return null;
-    }
-    getAppItemFromViewItem(viewItem) {
-        let entityItem = this.getEntityItemFromViewItem(viewItem), appItem = null;
-        if (entityItem)
-            for (let item of this.drawerItems) {
-                if (item.id == entityItem.parentId) {
-                    // got the parent, this is the app
-                    appItem = item;
-                    break;
-                }
-            }
-        return appItem;
-    }
-    loadApp() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            yield this.LoadDrawer();
-            this.setDrawerConfig();
-            window.addEventListener('resize', () => {
-                this.setDrawerConfig();
-            });
-        });
-    }
-    LoadDrawer() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            this.drawerItems.length = 0; // clear the array
-            // the Drawer configuraion has the following sections:
-            /*
-               * Home - a simple view that shows all the other options - dashboards, reports, data, etc, and ALSO shows Favorites and Most Recently Used Records
-               * Ask Skip - interaction with Skip AI
-               * Data
-               * Dashboards
-               * Reports
-               * Settings
-            */
-            // Home
-            yield this.loadHome(md);
-            // Skip
-            yield this.loadSkip(md);
-            // Data
-            yield this.loadApplications(md);
-            // Dashboards
-            yield this.loadResourceType('Dashboards', 'Dashboards', '/dashboards', md.CurrentUser.ID);
-            // Reports
-            yield this.loadResourceType('Reports', 'Reports', '/reports', md.CurrentUser.ID);
-            // Settings
-            yield this.loadSettings(md);
-            this.loading = false;
-        });
-    }
-    loadSkip(md) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const drawerItem = {
-                id: 'AskSkip',
-                selected: false,
-                text: 'Ask Skip',
-                path: '/askskip',
-                icon: 'k-i-user'
-            };
-            this.drawerItems.push(drawerItem);
-        });
-    }
-    loadHome(md) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const drawerItem = {
-                id: 'Home',
-                selected: true,
-                text: 'Home',
-                path: '/home',
-                icon: 'k-i-home'
-            };
-            this.drawerItems.push(drawerItem);
-        });
-    }
-    loadSettings(md) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const drawerItem = {
-                id: 'Settings',
-                selected: false,
-                text: 'Settings',
-                path: '/settings',
-                icon: 'k-i-gear'
-            };
-            this.drawerItems.push(drawerItem);
-        });
-    }
-    loadApplications(md) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const drawerItem = {
-                id: 'Data',
-                selected: false,
-                text: 'Data',
-                path: '/data',
-                icon: 'k-i-data'
-            };
-            this.drawerItems.push(drawerItem);
-        });
-    }
-    loadResourceType(key, resourceType, path, currentUserID) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rt = this.sharedService.ResourceTypeByName(resourceType);
-            if (rt) {
-                const icon = rt.Icon;
-                const drawerItem = {
-                    id: key,
-                    selected: false,
-                    text: resourceType,
-                    path: path,
-                    icon: icon ? 'k-i-' + icon : ''
-                };
-                this.drawerItems.push(drawerItem);
-            }
-        });
-    }
-    setDrawerConfig() {
-        const pageWidth = window.innerWidth;
-        if (pageWidth <= 840) {
-            this.mode = 'overlay';
-            this.mini = false;
-        }
-        else {
-            this.mode = 'push';
-            this.mini = true;
-        }
-    }
-    toggle() {
-        this.drawer.toggle();
-        this.sharedService.InvokeManualResize();
-    }
-}
-NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i3.Location), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i4.Title)); };
-NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["app-navigation"]], viewQuery: function NavigationComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(DrawerComponent, 5);
-        i0.ɵɵviewQuery(_c0, 5);
-        i0.ɵɵviewQuery(_c1, 5);
-        i0.ɵɵviewQuery(_c2, 7, ElementRef);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drawer = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drawerWrapper = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabstrip = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
-    } }, hostVars: 2, hostBindings: function NavigationComponent_HostBindings(rf, ctx) { if (rf & 1) {
-        i0.ɵɵlistener("resize", function NavigationComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow)("click", function NavigationComponent_click_HostBindingHandler() { return ctx.onClick(); }, false, i0.ɵɵresolveDocument);
-    } if (rf & 2) {
-        i0.ɵɵclassProp("mobile-screen", ctx.isMobileScreen);
-    } }, inputs: { applicationName: "applicationName" }, decls: 5, vars: 6, consts: [[1, "navigation-wrap", 3, "ngClass"], ["drawerWrapper", ""], ["type", "converging-spinner", 4, "ngIf"], [4, "ngIf"], ["class", "context-menu", 3, "ngStyle", 4, "ngIf"], ["type", "converging-spinner"], [3, "items", "mode", "mini", "animation", "autoCollapse", "select"], ["drawer", ""], ["mjFillContainer", ""], ["mjFillContainer", "", 1, "drawer-container", 3, "scrollable", "keepTabContent", "animate", "tabClose", "tabSelect"], ["tabstrip", ""], [3, "selected", "closable"], ["kendoTabTitle", ""], ["kendoTabContent", "", "class", "navigation-tab-contents"], [3, "selected", "closable", 4, "ngFor", "ngForOf"], ["name", "home", 3, "contextmenu"], [1, "nav-tab-title", 3, "contextmenu"], ["name", "clock", 3, "contextmenu"], [3, "name", "contextmenu"], [3, "Data", "isVisible", "ResourceRecordSaved", "ContentLoadingStarted", "ContentLoadingComplete"], [1, "context-menu", 3, "ngStyle"], [1, "context-menu-item", 3, "click"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0, 1);
-        i0.ɵɵtemplate(2, NavigationComponent_kendo_loader_2_Template, 1, 0, "kendo-loader", 2);
-        i0.ɵɵtemplate(3, NavigationComponent_kendo_drawer_container_3_Template, 10, 11, "kendo-drawer-container", 3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(4, NavigationComponent_div_4_Template, 7, 1, "div", 4);
-    } if (rf & 2) {
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3, ctx.loader));
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.loading);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx.loading);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.contextMenuVisible);
-    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i3.NgStyle, i1.RouterOutlet, i5.LoaderComponent, i6.TabStripComponent, i6.TabStripTabComponent, i6.TabContentDirective, i6.TabTitleDirective, i7.IconComponent, i8.FillContainer, i6.DrawerComponent, i6.DrawerContainerComponent, i6.DrawerContentComponent, i9.ResourceContainerComponent], styles: [".navigation-wrap[_ngcontent-%COMP%] {\r\n  height: calc(100vh - 80px);\r\n  width: 100%;\r\n  overflow:hidden\r\n}\r\n\r\n.nav-tab-title[_ngcontent-%COMP%] {\r\n  margin-left: 10px;\r\n}\r\n\r\n.context-menu[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  background-color: #ffffff;\r\n  border: 1px solid #ccc;\r\n  padding: 3px 3px;\r\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.context-menu-item[_ngcontent-%COMP%] {\r\n  padding: 8px 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.context-menu-item[_ngcontent-%COMP%]:hover {\r\n  background-color: #f1f1f1;\r\n}\r\n  .navigation-wrap .drawer-container {\r\n  padding: 20px;\r\n  background: #FAFAFA;\r\n}\r\n  .navigation-wrap .drawer-container .k-content {\r\n  padding: 25px;\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\r\n  background: #fafafa;\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n  background: #fafafa;\r\n  border-radius: 0;\r\n}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponent, [{
-        type: Component,
-        args: [{ selector: 'app-navigation', template: "<div class=\"navigation-wrap\" [ngClass]=\"{'waiting': loader}\"  #drawerWrapper>\r\n  <kendo-loader *ngIf=\"loading\" type=\"converging-spinner\" ></kendo-loader>\r\n  <kendo-drawer-container *ngIf=\"!loading\" >\r\n      <kendo-drawer\r\n      #drawer\r\n      [items]=\"drawerItems\"\r\n      [mode]=\"mode\"\r\n      [mini]=\"mini\"\r\n      [animation]=\"false\"\r\n      (select)=\"onDrawerSelect($event)\"\r\n      [autoCollapse]=\"false\"\r\n    >\r\n    </kendo-drawer>\r\n    <kendo-drawer-content mjFillContainer>\r\n      <kendo-tabstrip mjFillContainer class=\"drawer-container\" [scrollable]=\"true\" [keepTabContent]=\"true\" (tabClose)=\"onClose($event)\" (tabSelect)=\"onTabSelect($event)\" [animate]=\"false\" #tabstrip>\r\n        <kendo-tabstrip-tab [selected]=\"activeTabIndex === 0\" [closable]=\"false\">\r\n          <ng-template kendoTabTitle>\r\n            <kendo-icon name=\"home\" (contextmenu)=\"onTabContextMenu($event, 0)\"></kendo-icon>\r\n            <span class=\"nav-tab-title\" (contextmenu)=\"onTabContextMenu($event, 0)\">Home</span>\r\n          </ng-template>\r\n          <ng-template kendoTabContent class=\"navigation-tab-contents\">\r\n            <router-outlet></router-outlet>\r\n          </ng-template>\r\n        </kendo-tabstrip-tab>\r\n        <kendo-tabstrip-tab *ngFor=\"let tab of tabs;let i = index\" [selected]=\"isTabActive(tab.id)\" [closable]=\"true\">\r\n          <ng-template kendoTabTitle>\r\n            <kendo-icon [style.display]=\"tab?.contentLoading ? 'inline' : 'none'\" name=\"clock\" (contextmenu)=\"onTabContextMenu($event, i)\"></kendo-icon>\r\n            <kendo-icon [style.display]=\"!tab?.contentLoading && tab?.icon ? 'inline' : 'none'\" [name]=\"tab.icon\" (contextmenu)=\"onTabContextMenu($event, i)\"></kendo-icon>\r\n            <!-- <kendo-icon *ngIf=\"tab?.contentLoading\" name=\"clock\"></kendo-icon>\r\n            <kendo-icon *ngIf=\"!tab?.contentLoading && tab?.icon\" [name]=\"tab.icon\"></kendo-icon> -->\r\n            <span class=\"nav-tab-title\" (contextmenu)=\"onTabContextMenu($event, i)\">{{ tab.labelLoading ? 'Loading...' : tab.label }}</span>\r\n          </ng-template>\r\n          <ng-template kendoTabContent class=\"navigation-tab-contents\">\r\n            <app-resource [Data]=\"tab.data\" [isVisible]=\"tab?.id === getActiveTabId()\"\r\n                          (ResourceRecordSaved)=\"SaveSingleWorkspaceItem(tab)\"\r\n                          (ContentLoadingStarted)=\"setTabContentLoadingStatus(tab, true)\"\r\n                          (ContentLoadingComplete)=\"setTabContentLoadingStatus(tab, false)\"\r\n                          ></app-resource>\r\n          </ng-template>\r\n        </kendo-tabstrip-tab>\r\n      </kendo-tabstrip>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n<div class=\"context-menu\" [ngStyle]=\"contextMenuStyle\" *ngIf=\"contextMenuVisible\">\r\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(1)\">Close All</div>\r\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(2)\">Close Others</div>\r\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(3)\">Close Tabs to the Right</div>\r\n </div>\r\n", styles: [".navigation-wrap {\r\n  height: calc(100vh - 80px);\r\n  width: 100%;\r\n  overflow:hidden\r\n}\r\n\r\n.nav-tab-title {\r\n  margin-left: 10px;\r\n}\r\n\r\n.context-menu {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  background-color: #ffffff;\r\n  border: 1px solid #ccc;\r\n  padding: 3px 3px;\r\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.context-menu-item {\r\n  padding: 8px 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.context-menu-item:hover {\r\n  background-color: #f1f1f1;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container {\r\n  padding: 20px;\r\n  background: #FAFAFA;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-content {\r\n  padding: 25px;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\r\n  background: #fafafa;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n  background: #fafafa;\r\n  border-radius: 0;\r\n}\r\n"] }]
-    }], function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }, { type: i3.Location }, { type: i0.Renderer2 }, { type: i4.Title }]; }, { applicationName: [{
-            type: Input
-        }], isMobileScreen: [{
-            type: HostBinding,
-            args: ['class.mobile-screen']
-        }], drawer: [{
-            type: ViewChild,
-            args: [DrawerComponent, { static: false }]
-        }], drawerWrapper: [{
-            type: ViewChild,
-            args: ['drawerWrapper', { static: false }]
-        }], tabstrip: [{
-            type: ViewChild,
-            args: ["tabstrip", { static: false }]
-        }], container: [{
-            type: ViewChild,
-            args: ['container', { static: true, read: ElementRef }]
-        }], onWindowResize: [{
-            type: HostListener,
-            args: ['window:resize']
-        }], onClick: [{
-            type: HostListener,
-            args: ['document:click']
-        }] }); })();
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+import { Component, ElementRef, ViewChild, HostListener, HostBinding, Input } from '@angular/core';
+import { NavigationEnd, NavigationSkipped } from '@angular/router';
+import { DrawerComponent } from "@progress/kendo-angular-layout";
+import { Metadata, RunView, LogError } from '@memberjunction/core';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
+import { EventCodes } from '@memberjunction/ng-shared';
+import { BaseResourceComponent, ResourceData } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@memberjunction/ng-shared";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/platform-browser";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@progress/kendo-angular-layout";
+import * as i7 from "@progress/kendo-angular-icons";
+import * as i8 from "@memberjunction/ng-container-directives";
+import * as i9 from "../generic/resource-container-component";
+const _c0 = ["drawerWrapper"];
+const _c1 = ["tabstrip"];
+const _c2 = ["container"];
+function NavigationComponent_kendo_loader_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 5);
+} }
+function NavigationComponent_kendo_drawer_container_3_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 15);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_ng_template_7_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.onTabContextMenu($event, 0)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "span", 16);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_ng_template_7_Template_span_contextmenu_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.onTabContextMenu($event, 0)); });
+    i0.ɵɵtext(2, "Home");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("icon", ctx_r6.sharedService.kendoSVGIcon("home"));
+} }
+function NavigationComponent_kendo_drawer_container_3_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "router-outlet");
+} }
+function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_kendo_svgicon_0_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 18);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_kendo_svgicon_0_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r20); const i_r13 = i0.ɵɵnextContext(2).index; const ctx_r18 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r18.onTabContextMenu($event, i_r13)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r16 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("icon", ctx_r16.sharedService.kendoSVGIcon("clock"));
+} }
+function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 18);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_kendo_svgicon_1_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r23); const i_r13 = i0.ɵɵnextContext(2).index; const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.onTabContextMenu($event, i_r13)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tab_r12 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r17 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("icon", ctx_r17.sharedService.kendoSVGIcon(tab_r12.icon));
+} }
+function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵtemplate(0, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_kendo_svgicon_0_Template, 1, 1, "kendo-svgicon", 17)(1, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 17);
+    i0.ɵɵelementStart(2, "span", 16);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template_span_contextmenu_2_listener($event) { i0.ɵɵrestoreView(_r27); const i_r13 = i0.ɵɵnextContext().index; const ctx_r25 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r25.onTabContextMenu($event, i_r13)); });
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tab_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngIf", tab_r12 == null ? null : tab_r12.contentLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !(tab_r12 == null ? null : tab_r12.contentLoading) && (tab_r12 == null ? null : tab_r12.icon));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(tab_r12.labelLoading ? "Loading..." : tab_r12.label);
+} }
+function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-resource", 19);
+    i0.ɵɵlistener("ResourceRecordSaved", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template_app_resource_ResourceRecordSaved_0_listener() { i0.ɵɵrestoreView(_r31); const tab_r12 = i0.ɵɵnextContext().$implicit; const ctx_r29 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r29.SaveSingleWorkspaceItem(tab_r12)); })("ContentLoadingStarted", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template_app_resource_ContentLoadingStarted_0_listener() { i0.ɵɵrestoreView(_r31); const tab_r12 = i0.ɵɵnextContext().$implicit; const ctx_r32 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r32.setTabContentLoadingStatus(tab_r12, true)); })("ContentLoadingComplete", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template_app_resource_ContentLoadingComplete_0_listener() { i0.ɵɵrestoreView(_r31); const tab_r12 = i0.ɵɵnextContext().$implicit; const ctx_r34 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r34.setTabContentLoadingStatus(tab_r12, false)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tab_r12 = i0.ɵɵnextContext().$implicit;
+    const ctx_r15 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Data", tab_r12.data)("isVisible", (tab_r12 == null ? null : tab_r12.id) === ctx_r15.getActiveTabId());
+} }
+function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 11);
+    i0.ɵɵtemplate(1, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_1_Template, 4, 3, "ng-template", 12)(2, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_ng_template_2_Template, 1, 2, "ng-template", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tab_r12 = ctx.$implicit;
+    const ctx_r8 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("selected", ctx_r8.isTabActive(tab_r12.id))("closable", true);
+} }
+function NavigationComponent_kendo_drawer_container_3_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-drawer-container")(1, "kendo-drawer", 6, 7);
+    i0.ɵɵlistener("select", function NavigationComponent_kendo_drawer_container_3_Template_kendo_drawer_select_1_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r37 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r37.onDrawerSelect($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-drawer-content", 8)(4, "kendo-tabstrip", 9, 10);
+    i0.ɵɵlistener("tabClose", function NavigationComponent_kendo_drawer_container_3_Template_kendo_tabstrip_tabClose_4_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r39 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r39.onClose($event)); })("tabSelect", function NavigationComponent_kendo_drawer_container_3_Template_kendo_tabstrip_tabSelect_4_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.onTabSelect($event)); });
+    i0.ɵɵelementStart(6, "kendo-tabstrip-tab", 11);
+    i0.ɵɵtemplate(7, NavigationComponent_kendo_drawer_container_3_ng_template_7_Template, 3, 1, "ng-template", 12)(8, NavigationComponent_kendo_drawer_container_3_ng_template_8_Template, 1, 0, "ng-template", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_9_Template, 3, 2, "kendo-tabstrip-tab", 14);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("items", ctx_r2.drawerItems)("mode", ctx_r2.mode)("mini", ctx_r2.mini)("animation", false)("autoCollapse", false);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("scrollable", true)("keepTabContent", true)("animate", false);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("selected", ctx_r2.activeTabIndex === 0)("closable", false);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r2.tabs);
+} }
+function NavigationComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
+    i0.ɵɵlistener("click", function NavigationComponent_div_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.handleContextMenuOption(1)); });
+    i0.ɵɵtext(2, "Close All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 21);
+    i0.ɵɵlistener("click", function NavigationComponent_div_4_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r42); const ctx_r43 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r43.handleContextMenuOption(2)); });
+    i0.ɵɵtext(4, "Close Others");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 21);
+    i0.ɵɵlistener("click", function NavigationComponent_div_4_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r42); const ctx_r44 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r44.handleContextMenuOption(3)); });
+    i0.ɵɵtext(6, "Close Tabs to the Right");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngStyle", ctx_r3.contextMenuStyle);
+} }
+const _c3 = a0 => ({ "waiting": a0 });
+export class NavigationComponent {
+    onWindowResize() {
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+            this.checkViewportSize();
+        }, 200); // Adjust the debounce time as needed
+    }
+    onClick() {
+        this.contextMenuVisible = false;
+    }
+    // Inject the authentication service into your component through the constructor
+    constructor(router, route, sharedService, location, renderer, titleService, cdr) {
+        this.router = router;
+        this.route = route;
+        this.sharedService = sharedService;
+        this.location = location;
+        this.renderer = renderer;
+        this.titleService = titleService;
+        this.cdr = cdr;
+        this.drawerItems = [{
+                text: 'Loading...',
+                icon: 'k-i-apps',
+            }];
+        this.mode = 'push';
+        this.mini = true;
+        this.viewsList = [];
+        this.selectedDrawerItem = null;
+        this.selectedApp = null;
+        this.selectedEntity = null;
+        this.selectedView = null;
+        this.loading = true;
+        this.loader = false;
+        this.tabs = [];
+        this.closedTabs = []; // should always be empty after using it
+        this.tabQueryParams = {};
+        this.activeTabIndex = 0;
+        this.selectedTabIndex = 0;
+        this.workSpace = {};
+        this.workSpaceItems = [];
+        this.routeSub = null;
+        this.isMobileScreen = false;
+        this.contextMenuStyle = {};
+        this.contextMenuVisible = false;
+        this._loggedIn = false;
+        this._earlyEvents = [];
+        this.gotFirstNav = false;
+        this._mostRecentURL = '';
+        this.tabs = [];
+    }
+    onTabContextMenu(event, tab) {
+        event.preventDefault();
+        this.selectedTabIndex = tab;
+        const mouseEvent = event;
+        const mouseX = mouseEvent.clientX;
+        const mouseY = mouseEvent.clientY;
+        this.contextMenuStyle = {
+            top: mouseY + 'px',
+            left: mouseX + 'px'
+        };
+        this.contextMenuVisible = true;
+    }
+    handleContextMenuOption(option) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.closedTabs = [];
+            switch (option) {
+                case 1:
+                    // Close All
+                    this.closedTabs = this.closedTabs.concat(this.tabs);
+                    this.tabs = [];
+                    break;
+                case 2:
+                    // Close Others
+                    this.closedTabs = this.tabs.filter((tab, id) => id !== this.selectedTabIndex);
+                    this.tabs = [this.tabs[this.selectedTabIndex]];
+                    if (this.activeTabIndex > 1)
+                        this.activeTabIndex = 1;
+                    break;
+                case 3:
+                    // Close Tabs to the Right
+                    this.activeTabIndex = this.selectedTabIndex + 1;
+                    this.closedTabs = this.closedTabs.concat(this.tabs.slice(this.activeTabIndex));
+                    this.tabs = this.tabs.slice(0, this.selectedTabIndex + 1);
+                    break;
+                default:
+                    // Handle other options if needed
+                    break;
+            }
+            this.contextMenuVisible = false;
+            for (let i = 0; i < this.closedTabs.length; ++i) {
+                const tab = this.closedTabs[i];
+                yield this.removeWorkspaceItem(tab);
+            }
+            this.activeTabIndex = 0;
+            this.tabstrip.selectTab(this.activeTabIndex);
+            // in this situation we have the home tab showing, so we need to update the URL path based on what's selected in the drawer
+            let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
+            this.router.navigate([url]);
+            //this.location.go(url); // update the browser URL if needed  
+            this._mostRecentURL = url;
+        });
+    }
+    checkViewportSize() {
+        this.isMobileScreen = window.innerWidth <= 840;
+    }
+    ngAfterViewInit() {
+        MJGlobal.Instance.GetEventListener(true) // true gets us replay of past events so we can "catch up" as needed
+            .subscribe(event => {
+            this.handleEvent(event, event.args);
+        });
+        this.route.queryParams.subscribe(params => {
+            // what we want to do here is CACHE the params for the CURRENT tab so we have them 
+            // to throw back in the URL whenever the tab gets clicked on again in the future
+            this.tabQueryParams['tab_' + this.activeTabIndex] = params;
+        });
+    }
+    handleEvent(event, args) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // event handler
+            switch (event.event) {
+                case MJEventType.LoggedIn:
+                    yield this.loadApp();
+                    yield this.getWorkspace();
+                    this._loggedIn = true;
+                    // check for early events and replay them now that we're logged in
+                    for (let i = 0; i < this._earlyEvents.length; ++i) {
+                        const e = this._earlyEvents[i];
+                        this.handleEvent(e.event, e.args); // recursve call to handle the event
+                    }
+                    this._earlyEvents.length = 0; // clear the array
+                    // resize everything after a short delay
+                    setTimeout(() => {
+                        this.sharedService.InvokeManualResize();
+                    }, 100);
+                    this.checkForBaseURL();
+                    break;
+                case MJEventType.ComponentEvent:
+                    if (!this._loggedIn) {
+                        // we're not logged in yet, so queue up the event to be handled later
+                        this._earlyEvents.push({ event, args });
+                    }
+                    else {
+                        // we're logged in so go ahead and handle normally
+                        switch (event.eventCode) {
+                            case EventCodes.ViewNotifications:
+                                this.setActiveTabToHome();
+                                break;
+                            case EventCodes.ViewCreated:
+                            case EventCodes.AddDashboard:
+                            case EventCodes.AddReport:
+                            case EventCodes.AddQuery:
+                            case EventCodes.EntityRecordClicked:
+                            case EventCodes.ViewClicked:
+                            case EventCodes.ViewClicked:
+                            case EventCodes.RunSearch:
+                                // another component requested that we add something to our tab structure
+                                this.AddOrSelectTab(event.args);
+                                break;
+                            default:
+                                break;
+                        }
+                    }
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    ngOnInit() {
+        this.checkViewportSize();
+        // Subscribe to route changes
+        this.routeSub = this.router.events.pipe().subscribe((args) => {
+            if (args instanceof NavigationEnd || args instanceof PopStateEvent) {
+                const trigger = args.navigationTrigger;
+                switch (trigger) {
+                    case 'imperative':
+                        // this is a programmatic navigation, so we don't want to do anything here
+                        break;
+                    case 'popstate':
+                        // this is a browser back/forward navigation, so we want to do something here
+                        // when the route changes and it maps to one of our drawer items, select it
+                        this.NavigateFromUrl();
+                        break;
+                    default:
+                        // this is a click on a link, so we want to do something here
+                        // when the route changes and it maps to one of our drawer items, select it
+                        this.NavigateFromUrl();
+                        break;
+                }
+            }
+            else if (args instanceof NavigationSkipped) {
+                // check to see if the route in args is truly the same as the this.route
+                // if so, then we're navigating to the same route and we don't want to do anything
+                // if not, then we're navigating to a different route and we want to do something
+                if (this._mostRecentURL.trim().toLowerCase() != args.url.trim().toLowerCase()) {
+                    this.NavigateFromUrl();
+                }
+            }
+        });
+    }
+    NavigateFromUrl() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let url = this.router.url.trim().toLowerCase();
+            if (url === '/') {
+                this._mostRecentURL = '/home';
+                this.router.navigate(['/home']); // redirect to /home
+                this.gotFirstNav = true;
+            }
+            else {
+                this._mostRecentURL = this.router.url;
+                // see if this matches a drawer item or not
+                const di = this.drawerItems;
+                //const item = di.find(i => (<any>i).path.toLowerCase().trim() === url.toLowerCase().trim());
+                const item = di.find(i => url.toLowerCase().trim().startsWith(i.path.toLowerCase().trim()));
+                if (item) {
+                    this.selectDrawerItem(this.drawerItems.indexOf(item));
+                    this.gotFirstNav = true;
+                }
+            }
+            if (this.activeTabIndex > 0) {
+                // check to see if there are query params on the url and if so, stash em in the tabQueryParams array so we can restore the full set of query params later if we
+                // come back to this tab
+                const urlParts = this.router.url.split('?');
+                if (urlParts.length > 1) {
+                    // we have query params, so stash em
+                    const params = new URLSearchParams(urlParts[1]);
+                    const keys = params.keys();
+                    const queryParams = {};
+                    for (const key of keys) {
+                        queryParams[key] = params.get(key);
+                    }
+                    this.tabQueryParams['tab_' + this.activeTabIndex] = queryParams;
+                }
+            }
+        });
+    }
+    selectDrawerItem(index) {
+        this.selectedDrawerItem = this.drawerItems[index];
+        // Get the <ul> element that contains the <li> elements
+        const ulElement = this.drawerWrapper.nativeElement.querySelector('ul');
+        if (ulElement) {
+            // Get the <li> element at the specified index
+            const liElement = ulElement.children[index];
+            // add the k-selected class to the <li> element
+            this.renderer.addClass(liElement, 'k-selected');
+            // and remove k-selected from all other <li> within the <ul>
+            for (let i = 0; i < ulElement.children.length; ++i) {
+                if (i !== index)
+                    this.renderer.removeClass(ulElement.children[i], 'k-selected');
+            }
+        }
+        // make sure that the first tab is selected since this is showing stuff in the Home/Nav tab
+        this.setActiveTabToHome();
+    }
+    setActiveTabToHome() {
+        if (this.activeTabIndex !== 0) {
+            this.activeTabIndex = 0;
+            this.tabstrip.selectTab(0);
+            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
+        }
+    }
+    checkForBaseURL() {
+        setTimeout(() => {
+            // this is a hack to get the first navigation to work correctly when the route is to the / base URL that doesn't seem to trigger the rest of our code like all other routes
+            if (!this.gotFirstNav) {
+                this.gotFirstNav = true;
+                this.NavigateFromUrl();
+            }
+        }, 10);
+    }
+    getWorkspace() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            const rv = new RunView();
+            const workspaceParams = {
+                EntityName: "Workspaces",
+                ExtraFilter: `UserID=${md.CurrentUser.ID}`
+            };
+            const workspaces = yield rv.RunView(workspaceParams);
+            if (workspaces.Success) {
+                const workspaceRecord = yield md.GetEntityObject("Workspaces");
+                if (workspaces.Results.length) {
+                    const workspace = workspaces.Results.find((workspace) => workspace.UserID === md.CurrentUser.ID);
+                    yield workspaceRecord.Load(workspace.ID);
+                }
+                else {
+                    workspaceRecord.NewRecord();
+                    workspaceRecord.Name = `${md.CurrentUser.Name || md.CurrentUser.ID}'s Workspace`;
+                    workspaceRecord.UserID = md.CurrentUser.ID;
+                    yield workspaceRecord.Save();
+                }
+                this.workSpace = workspaceRecord;
+                const workspaceItemParams = {
+                    EntityName: "Workspace Items",
+                    ExtraFilter: `WorkspaceID='${this.workSpace.ID}'`
+                };
+                const workspaceItems = yield rv.RunView(workspaceItemParams);
+                if (workspaceItems.Success) {
+                    this.workSpaceItems = workspaceItems.Results;
+                    yield this.LoadWorkSpace();
+                }
+            }
+        });
+    }
+    LoadWorkSpace() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            this.tabs = []; // first clear out the tabs - this is often already the state but in case this is a full refresh, make sure we do this.
+            this.workSpaceItems.forEach((item, index) => __awaiter(this, void 0, void 0, function* () {
+                const itemData = item.Configuration ? JSON.parse(item.Configuration) : {};
+                const resourceData = new ResourceData({
+                    ID: item.ID,
+                    Name: item.Name,
+                    ResourceTypeID: item.ResourceTypeID,
+                    ResourceRecordID: item.ResourceRecordID,
+                    Configuration: itemData,
+                });
+                const newTab = {
+                    id: item.ID,
+                    labelLoading: true,
+                    contentLoading: false,
+                    data: resourceData,
+                    workspaceItem: null, // let this get populated later from the ID if we need to modify it
+                    icon: resourceData.ResourceIcon
+                };
+                this.tabs.push(newTab);
+                setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                    // non-blocking, load dynamically
+                    newTab.label = yield this.GetWorkspaceItemDisplayName(resourceData);
+                    newTab.labelLoading = false;
+                    if (newTab === this.tabs[this.activeTabIndex - 1]) // subtract one since the activeTabIndex is relative to the full set of tabs and the this.tabs array doesn't include the HOME tab
+                        this.setAppTitle(newTab.label);
+                }), 10);
+            }));
+        });
+    }
+    setAppTitle(title = '') {
+        if (title === '')
+            this.titleService.setTitle(this.applicationName);
+        else
+            this.titleService.setTitle(title + ' (' + this.applicationName + ')');
+    }
+    checkForExistingTab(data) {
+        let existingTab;
+        if (data.ResourceType.trim().toLowerCase() === 'search results') {
+            // we have a different matching logic for search results because we want to match on the search input as well as the entity
+            existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
+                t.data.Configuration.Entity === data.Configuration.Entity &&
+                t.data.Configuration.SearchInput === data.Configuration.SearchInput);
+        }
+        else if (data.ResourceType.trim().toLowerCase() === 'user views') {
+            // a viwe can be either saved (where we have a view id) or dyanmic (where we have an entity name, and optionally, an extra filter)
+            if (data.ResourceRecordID) {
+                // saved view
+                existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
+                    t.data.ResourceRecordID === data.ResourceRecordID &&
+                    data.ResourceRecordID !== null &&
+                    data.ResourceRecordID !== undefined // make sure that we don't match on null/undefined ResourceRecordID's - these should always be NEW tabs
+                );
+            }
+            else {
+                // dynamic view, compare entity name and if we have extra filter use that for comparison too
+                existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
+                    t.data.Configuration.Entity === data.Configuration.Entity &&
+                    t.data.Configuration.ExtraFilter === data.Configuration.ExtraFilter);
+            }
+        }
+        else {
+            existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
+                t.data.ResourceRecordID === data.ResourceRecordID &&
+                data.ResourceRecordID // make sure that we don't match on null/undefined ResourceRecordID's - these should always be NEW tabs
+            );
+        }
+        return existingTab;
+    }
+    AddOrSelectTab(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const t = this.tabs;
+            this.loader = true;
+            const existingTab = this.checkForExistingTab(data);
+            if (existingTab) {
+                const index = this.tabs.indexOf(existingTab);
+                this.activeTabIndex = index + 1; // add one because the HOME tab is not in the tabs array but it IS part of our tab structure
+                this.tabstrip.selectTab(this.activeTabIndex);
+                this.scrollIntoView();
+                if (existingTab.label)
+                    this.setAppTitle(existingTab.label);
+                else
+                    this.setAppTitle();
+                this.loader = false;
+            }
+            else {
+                const newTab = {
+                    id: -1, // initially -1 but will be changed to the WorkspaceItem ID once we save it
+                    data: data,
+                    labelLoading: true,
+                    contentLoading: false,
+                    workspaceItem: null,
+                    icon: data.ResourceIcon,
+                };
+                // save it before we push to the tabs colleciton because we want the WorkspaceItem ID to be populated in the tab.id before we initialize the new tab by adding it to the this.tabs array
+                yield this.SaveSingleWorkspaceItem(newTab);
+                // now add to data structure
+                this.tabs.push(newTab);
+                // select the new tab
+                this.activeTabIndex = this.tabs.length; // this is intentionally past array boundary because ActiveTabIndex includes the Home tab that is not part of the tabs array
+                this.tabstrip.selectTab(this.activeTabIndex);
+                //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
+                this.sharedService.InvokeManualResize();
+                this.scrollIntoView();
+                setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                    // non-blocking this way
+                    newTab.label = yield this.GetWorkspaceItemDisplayName(data); // do this after we fire up the loading so that we don't block anything
+                    this.setAppTitle(newTab.label);
+                    newTab.labelLoading = false;
+                    this.loader = false;
+                }), 10);
+            }
+        });
+    }
+    updateBrowserURL(tab, data) {
+        // update the URL to reflect the current tab
+        var _a;
+        // FIRST, construct the base URL based on the resource type
+        const rt = this.sharedService.ResourceTypeByID(data.ResourceTypeID);
+        let url = '/resource';
+        switch (rt === null || rt === void 0 ? void 0 : rt.Name.toLowerCase().trim()) {
+            case 'user views':
+                if (data.ResourceRecordID && !isNaN(data.ResourceRecordID) && data.ResourceRecordID > 0) {
+                    url += `/view/${data.ResourceRecordID}`;
+                }
+                else if ((_a = data.Configuration) === null || _a === void 0 ? void 0 : _a.Entity) {
+                    // we don't have a view id. This can occur when we're referring to a dyanmic view where our data.Configuration.Entity is set and data.Configuration.ExtraFilter is set
+                    // so we need to construct a URL that will load up the dynamic view
+                    url += `/view/0?Entity=${data.Configuration.Entity}&ExtraFilter=${data.Configuration.ExtraFilter}`;
+                }
+                else {
+                    // we don't have a view ID and we also don't have an entity name, so this is an error condition
+                    LogError(`Invalid view configuration. No view ID or entity name specified.`);
+                    this.sharedService.CreateSimpleNotification(`Invalid view configuration. No view ID or entity name specified.`, "error", 5000);
+                    return;
+                }
+                break;
+            case 'dashboards':
+                url += `/dashboard/${data.ResourceRecordID}`;
+                break;
+            case 'reports':
+                url += `/report/${data.ResourceRecordID}`;
+                break;
+            case 'queries':
+                url += `/query/${data.ResourceRecordID}`;
+                break;
+            case 'records':
+                url += `/record/${data.ResourceRecordID}?Entity=${data.Configuration.Entity}`;
+                break;
+            case 'search results':
+                url += `/search/${data.Configuration.SearchInput}?Entity=${data.Configuration.Entity}`;
+                break;
+            case 'settings':
+                url += `/settings`;
+                break;
+            case 'notifications':
+                url += `/notifications`;
+                break;
+        }
+        // SECOND, we need to, in some cases, append query params that the TAB had created, we don't know what those are, they could be anything. In the AfterViewInit() code above we cache
+        //         these whenever they change for each tab.
+        // Split the URL into the path and existing query params
+        const [path, existingQuery] = url.split('?');
+        // Create a URLSearchParams object from the existing query params
+        const queryParams = new URLSearchParams(existingQuery);
+        // Your cached query params, assuming it's an object like { key1: 'value1', key2: 'value2' }
+        const tabIndex = this.tabs.indexOf(tab) + 1; // we add 1 Because the HOME tab is not in the array so we have to offset by 1 here for our data structure
+        const cachedQueryParams = this.tabQueryParams['tab_' + tabIndex]; // Replace with your actual method to get cached params
+        if (cachedQueryParams) {
+            // Merge cached query params if they don't already exist in the URL
+            const keys = Object.keys(cachedQueryParams);
+            for (const key of keys) {
+                if (!queryParams.has(key)) {
+                    queryParams.append(key, cachedQueryParams[key]);
+                }
+            }
+        }
+        // Construct the new URL with merged query params
+        const params = queryParams.toString();
+        const newUrl = `${path}${params && params.length > 0 ? '?' + queryParams.toString() : ''}`;
+        // Update the most recent URL
+        this._mostRecentURL = newUrl;
+        // Update the browser URL without triggering Angular navigation
+        //    this.location.go(newUrl);
+        this.router.navigateByUrl(newUrl); //, { skipLocationChange: true });
+        // Update the app title
+        this.setAppTitle(tab.label);
+    }
+    scrollIntoView() {
+        const containerElement = this.tabstrip.wrapper.nativeElement;
+        setTimeout(() => {
+            const newTabElement = containerElement.querySelector(`li:nth-child(${this.activeTabIndex + 1})`);
+            newTabElement.scrollIntoView({ inline: 'nearest' });
+        }, 200);
+    }
+    GetWorkspaceItemDisplayName(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, data.ResourceType);
+            if (resourceReg) {
+                const resource = new resourceReg.SubClass();
+                return yield resource.GetResourceDisplayName(data);
+            }
+            else
+                return `Workspace Item ${data.ID}`;
+        });
+    }
+    SaveWorkspace() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let bSuccess = true;
+            for (let i = 0; i < this.tabs.length; ++i) {
+                const tab = this.tabs[i];
+                bSuccess = (yield this.SaveSingleWorkspaceItem(tab)) && bSuccess;
+            }
+            return bSuccess;
+        });
+    }
+    SaveSingleWorkspaceItem(tab) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                let index = this.tabs.indexOf(tab);
+                if (index < 0)
+                    index = this.tabs.length; // this situation occurs when the tab hasn't yet been added to the tabs collection so the index will be = the length of the tabs collection
+                const md = new Metadata();
+                let wsItem;
+                if (!tab.workspaceItem) {
+                    wsItem = (yield md.GetEntityObject('Workspace Items'));
+                    if (tab.data.ID && !isNaN(tab.data.ID) && tab.data.ID > 0)
+                        yield wsItem.Load(tab.data.ID);
+                    else {
+                        wsItem.NewRecord();
+                        wsItem.Name = tab.data.Name ? tab.data.Name : tab.data.ResourceType + ' Record:' + tab.data.ResourceRecordID;
+                        wsItem.WorkSpaceID = this.workSpace.ID;
+                        wsItem.ResourceTypeID = (_a = tab.data) === null || _a === void 0 ? void 0 : _a.ResourceTypeID;
+                    }
+                    tab.workspaceItem = wsItem;
+                }
+                else {
+                    wsItem = tab.workspaceItem;
+                }
+                wsItem.ResourceRecordID = tab.data.ResourceRecordID.toString();
+                wsItem.Sequence = index;
+                wsItem.Configuration = JSON.stringify(tab.data.Configuration); // JSON.stringify({ Entity: tab.data.Entity });
+                const result = yield wsItem.Save();
+                tab.id = wsItem.ID;
+                return result;
+            }
+            catch (err) {
+                LogError(err);
+                return false;
+            }
+        });
+    }
+    setTabContentLoadingStatus(tab, bLoading) {
+        tab.contentLoading = bLoading;
+        this.cdr.detectChanges(); // Manually trigger change detection
+    }
+    onClose(ev) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (ev.tab.selected) {
+                setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                    // find the closest tab to the one we just closed
+                    yield this.removeWorkspaceItem(this.tabs[ev.index - 1]);
+                    if (ev.index < this.tabs.length + 1) {
+                        // NOT the last tab, kendo by defulat will show the next tab, so let that be, but we need to update our routing info
+                        // dont need to update active tab index or call selectTab() here because kendo does this and activetab index stays the same since we're closing the tab
+                        const i = this.activeTabIndex > 0 ? this.activeTabIndex - 1 : 0;
+                        const tabs = this.tabs;
+                        const tab = tabs[i];
+                        if (tab) {
+                            const data = tab.data;
+                            this.updateBrowserURL(tab, data);
+                        }
+                    }
+                    else {
+                        if (ev.index > 1) {
+                            // the to-be-selected tab is a RESOURCE so do what's appropraite there
+                            this.activeTabIndex = ev.index - 1;
+                            this.tabstrip.selectTab(ev.index - 1);
+                            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
+                            const i = this.activeTabIndex > 0 ? this.activeTabIndex - 1 : 0;
+                            const tabs = this.tabs;
+                            const tab = tabs[i];
+                            if (tab) {
+                                const data = tab.data;
+                                this.updateBrowserURL(tab, data);
+                            }
+                        }
+                        else {
+                            // the tab that will be selected is the HOME tab o we need to update
+                            this.activeTabIndex = 0;
+                            this.tabstrip.selectTab(0);
+                            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
+                            // in this situation we have the home tab showing, so we need to update the URL path based on what's selected in the drawer
+                            let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
+                            this.router.navigate([url]);
+                            //this.location.go(url); // update the browser URL if needed  
+                            this._mostRecentURL = url;
+                        }
+                    }
+                }), 100);
+            }
+        });
+    }
+    removeWorkspaceItem(tab) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // remove the tab from the tabs collection
+            const index = this.tabs.indexOf(tab);
+            if (index >= 0)
+                this.tabs.splice(index, 1);
+            if (!tab.workspaceItem && tab.id && tab.id > 0) {
+                // we lazy load the workspaceItem entity objects, so we load it here so we can delete it below, but only when it wasn't already loaded
+                const md = new Metadata();
+                tab.workspaceItem = (yield md.GetEntityObject('Workspace Items'));
+                yield tab.workspaceItem.Load(tab.id);
+            }
+            if (tab.workspaceItem) {
+                if (!(yield tab.workspaceItem.Delete())) {
+                    // error deleting the workspace item, alert the user
+                    this.sharedService.CreateSimpleNotification('Error deleting workspace item ' + tab.workspaceItem.Name + ' from the database. Please contact your system administrator.', 'error', 5000);
+                }
+            }
+        });
+    }
+    onTabSelect(e) {
+        e.preventDefault();
+        if (this.activeTabIndex !== e.index) {
+            this.activeTabIndex = e.index;
+            this.sharedService.InvokeManualResize();
+            if (e.index === 0) {
+                let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
+                if (this.selectedDrawerItem !== null && this.selectedDrawerItem !== undefined)
+                    url = this.selectedDrawerItem.path;
+                this.router.navigate([url]);
+                //this.location.go(url); // update the browser URL if needed
+                this.setAppTitle();
+                this._mostRecentURL = url;
+            }
+            else {
+                const tab = this.tabs[e.index - 1];
+                if (tab) {
+                    this.setAppTitle(tab.label);
+                    const data = tab.data;
+                    this.updateBrowserURL(tab, data);
+                }
+            }
+        }
+    }
+    getActiveTabId() {
+        var _a;
+        if (this.activeTabIndex === 0) {
+            return null;
+        }
+        else // subtract 1 from the activeTabIndex if it is not the first tab since our data structure is for tabs 1 to n
+            return (_a = this.tabs[this.activeTabIndex - 1]) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    isTabActive(tabId) {
+        return this.getActiveTabId() === tabId;
+    }
+    ngOnDestroy() {
+        // Clean up the subscription when the component is destroyed
+        clearTimeout(this.resizeTimeout);
+        if (this.routeSub)
+            this.routeSub.unsubscribe();
+        window.removeEventListener('resize', () => { });
+    }
+    onDrawerSelect(ev) {
+        this.selectedDrawerItem = ev.item;
+        this.router.navigate([ev.item.path]);
+        this._mostRecentURL = ev.item.path;
+        // make sure that the first tab is selected since this is showing stuff in the Home/Nav tab
+        if (this.activeTabIndex !== 0) {
+            this.activeTabIndex = 0;
+            this.tabstrip.selectTab(0);
+            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
+        }
+        this.setAppTitle(ev.item.text);
+    }
+    getEntityItemFromViewItem(viewItem) {
+        let entityItem = null;
+        for (let item of this.drawerItems) {
+            if (item.id == viewItem.parentId) {
+                // got the parent, this is the entity
+                return item;
+            }
+        }
+        return null;
+    }
+    getAppItemFromViewItem(viewItem) {
+        let entityItem = this.getEntityItemFromViewItem(viewItem), appItem = null;
+        if (entityItem)
+            for (let item of this.drawerItems) {
+                if (item.id == entityItem.parentId) {
+                    // got the parent, this is the app
+                    appItem = item;
+                    break;
+                }
+            }
+        return appItem;
+    }
+    loadApp() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            yield this.LoadDrawer();
+            this.setDrawerConfig();
+            window.addEventListener('resize', () => {
+                this.setDrawerConfig();
+            });
+        });
+    }
+    LoadDrawer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            this.drawerItems.length = 0; // clear the array
+            // the Drawer configuraion has the following sections:
+            /*
+               * Home - a simple view that shows all the other options - dashboards, reports, data, etc, and ALSO shows Favorites and Most Recently Used Records
+               * Ask Skip - interaction with Skip AI
+               * Data
+               * Dashboards
+               * Reports
+               * Settings
+            */
+            // Home
+            yield this.loadHome(md);
+            // Skip
+            yield this.loadSkip(md);
+            // Data
+            yield this.loadApplications(md);
+            // Dashboards
+            yield this.loadResourceType('Dashboards', 'Dashboards', '/dashboards', md.CurrentUser.ID);
+            // Reports
+            yield this.loadResourceType('Reports', 'Reports', '/reports', md.CurrentUser.ID);
+            // Queries
+            yield this.loadResourceType('Queries', 'Queries', '/queries', md.CurrentUser.ID);
+            // Settings
+            yield this.loadSettings(md);
+            this.loading = false;
+        });
+    }
+    loadSkip(md) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const drawerItem = {
+                id: 'AskSkip',
+                selected: false,
+                text: 'Ask Skip',
+                path: '/askskip',
+                svgIcon: this.sharedService.kendoSVGIcon('user')
+            };
+            this.drawerItems.push(drawerItem);
+        });
+    }
+    loadHome(md) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const drawerItem = {
+                id: 'Home',
+                selected: true,
+                text: 'Home',
+                path: '/home',
+                svgIcon: this.sharedService.kendoSVGIcon('home')
+            };
+            this.drawerItems.push(drawerItem);
+        });
+    }
+    loadSettings(md) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const drawerItem = {
+                id: 'Settings',
+                selected: false,
+                text: 'Settings',
+                path: '/settings',
+                svgIcon: this.sharedService.kendoSVGIcon('gear')
+            };
+            this.drawerItems.push(drawerItem);
+        });
+    }
+    loadApplications(md) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const drawerItem = {
+                id: 'Data',
+                selected: false,
+                text: 'Data',
+                path: '/data',
+                svgIcon: this.sharedService.kendoSVGIcon('data')
+            };
+            this.drawerItems.push(drawerItem);
+        });
+    }
+    loadResourceType(key, resourceType, path, currentUserID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rt = this.sharedService.ResourceTypeByName(resourceType);
+            if (rt) {
+                const icon = rt.Icon;
+                const drawerItem = {
+                    id: key,
+                    selected: false,
+                    text: resourceType,
+                    path: path,
+                    svgIcon: this.sharedService.kendoSVGIcon(icon)
+                };
+                this.drawerItems.push(drawerItem);
+            }
+        });
+    }
+    setDrawerConfig() {
+        const pageWidth = window.innerWidth;
+        if (pageWidth <= 840) {
+            this.mode = 'overlay';
+            this.mini = false;
+        }
+        else {
+            this.mode = 'push';
+            this.mini = true;
+        }
+    }
+    toggle() {
+        this.drawer.toggle();
+        this.sharedService.InvokeManualResize();
+    }
+}
+NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i3.Location), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i4.Title), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["app-navigation"]], viewQuery: function NavigationComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(DrawerComponent, 5);
+        i0.ɵɵviewQuery(_c0, 5);
+        i0.ɵɵviewQuery(_c1, 5);
+        i0.ɵɵviewQuery(_c2, 7, ElementRef);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drawer = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drawerWrapper = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabstrip = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
+    } }, hostVars: 2, hostBindings: function NavigationComponent_HostBindings(rf, ctx) { if (rf & 1) {
+        i0.ɵɵlistener("resize", function NavigationComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow)("click", function NavigationComponent_click_HostBindingHandler() { return ctx.onClick(); }, false, i0.ɵɵresolveDocument);
+    } if (rf & 2) {
+        i0.ɵɵclassProp("mobile-screen", ctx.isMobileScreen);
+    } }, inputs: { applicationName: "applicationName" }, decls: 5, vars: 6, consts: [[1, "navigation-wrap", 3, "ngClass"], ["drawerWrapper", ""], ["type", "converging-spinner", 4, "ngIf"], [4, "ngIf"], ["class", "context-menu", 3, "ngStyle", 4, "ngIf"], ["type", "converging-spinner"], [3, "items", "mode", "mini", "animation", "autoCollapse", "select"], ["drawer", ""], ["mjFillContainer", ""], ["mjFillContainer", "", 1, "drawer-container", 3, "scrollable", "keepTabContent", "animate", "tabClose", "tabSelect"], ["tabstrip", ""], [3, "selected", "closable"], ["kendoTabTitle", ""], ["kendoTabContent", "", "class", "navigation-tab-contents"], [3, "selected", "closable", 4, "ngFor", "ngForOf"], ["name", "home", 3, "icon", "contextmenu"], [1, "nav-tab-title", 3, "contextmenu"], [3, "icon", "contextmenu", 4, "ngIf"], [3, "icon", "contextmenu"], [3, "Data", "isVisible", "ResourceRecordSaved", "ContentLoadingStarted", "ContentLoadingComplete"], [1, "context-menu", 3, "ngStyle"], [1, "context-menu-item", 3, "click"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0, 1);
+        i0.ɵɵtemplate(2, NavigationComponent_kendo_loader_2_Template, 1, 0, "kendo-loader", 2)(3, NavigationComponent_kendo_drawer_container_3_Template, 10, 11, "kendo-drawer-container", 3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(4, NavigationComponent_div_4_Template, 7, 1, "div", 4);
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3, ctx.loader));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.loading);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", !ctx.loading);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.contextMenuVisible);
+    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i3.NgStyle, i1.RouterOutlet, i5.LoaderComponent, i6.TabStripComponent, i6.TabStripTabComponent, i6.TabContentDirective, i6.TabTitleDirective, i7.SVGIconComponent, i8.FillContainer, i6.DrawerComponent, i6.DrawerContainerComponent, i6.DrawerContentComponent, i9.ResourceContainerComponent], styles: [".navigation-wrap[_ngcontent-%COMP%] {\r\n  height: calc(100vh - 80px);\r\n  width: 100%;\r\n  overflow:hidden\r\n}\r\n\r\n.nav-tab-title[_ngcontent-%COMP%] {\r\n  margin-left: 10px;\r\n}\r\n\r\n.context-menu[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  background-color: #ffffff;\r\n  border: 1px solid #ccc;\r\n  padding: 3px 3px;\r\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.context-menu-item[_ngcontent-%COMP%] {\r\n  padding: 8px 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.context-menu-item[_ngcontent-%COMP%]:hover {\r\n  background-color: #f1f1f1;\r\n}\r\n  .navigation-wrap .drawer-container {\r\n  padding: 20px;\r\n  background: #FAFAFA;\r\n}\r\n  .navigation-wrap .drawer-container .k-content {\r\n  padding: 25px;\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\r\n  background: #fafafa;\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n  background: #fafafa;\r\n  border-radius: 0;\r\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponent, [{
+        type: Component,
+        args: [{ selector: 'app-navigation', template: "<div class=\"navigation-wrap\" [ngClass]=\"{'waiting': loader}\"  #drawerWrapper>\r\n  <kendo-loader *ngIf=\"loading\" type=\"converging-spinner\" ></kendo-loader>\r\n  <kendo-drawer-container *ngIf=\"!loading\" >\r\n      <kendo-drawer\r\n      #drawer\r\n      [items]=\"drawerItems\"\r\n      [mode]=\"mode\"\r\n      [mini]=\"mini\"\r\n      [animation]=\"false\"\r\n      (select)=\"onDrawerSelect($event)\"\r\n      [autoCollapse]=\"false\"\r\n    >\r\n    </kendo-drawer>\r\n    <kendo-drawer-content mjFillContainer>\r\n      <kendo-tabstrip mjFillContainer class=\"drawer-container\" [scrollable]=\"true\" [keepTabContent]=\"true\" (tabClose)=\"onClose($event)\" (tabSelect)=\"onTabSelect($event)\" [animate]=\"false\" #tabstrip>\r\n        <kendo-tabstrip-tab [selected]=\"activeTabIndex === 0\" [closable]=\"false\">\r\n          <ng-template kendoTabTitle>\r\n            <kendo-svgicon name=\"home\" [icon]=\"sharedService.kendoSVGIcon('home')\" (contextmenu)=\"onTabContextMenu($event, 0)\"></kendo-svgicon>\r\n            <span class=\"nav-tab-title\" (contextmenu)=\"onTabContextMenu($event, 0)\">Home</span>\r\n          </ng-template>\r\n          <ng-template kendoTabContent class=\"navigation-tab-contents\">\r\n            <router-outlet></router-outlet>\r\n          </ng-template>\r\n        </kendo-tabstrip-tab>\r\n        <kendo-tabstrip-tab *ngFor=\"let tab of tabs;let i = index\" [selected]=\"isTabActive(tab.id)\" [closable]=\"true\">\r\n          <ng-template kendoTabTitle>\r\n            <kendo-svgicon *ngIf=\"tab?.contentLoading\" [icon]=\"sharedService.kendoSVGIcon('clock')\" (contextmenu)=\"onTabContextMenu($event, i)\"></kendo-svgicon>\r\n            <kendo-svgicon *ngIf=\"!tab?.contentLoading && tab?.icon\" [icon]=\"sharedService.kendoSVGIcon(tab.icon)\" (contextmenu)=\"onTabContextMenu($event, i)\"></kendo-svgicon>\r\n            <span class=\"nav-tab-title\" (contextmenu)=\"onTabContextMenu($event, i)\">{{ tab.labelLoading ? 'Loading...' : tab.label }}</span>\r\n          </ng-template>\r\n          <ng-template kendoTabContent class=\"navigation-tab-contents\">\r\n            <app-resource [Data]=\"tab.data\" [isVisible]=\"tab?.id === getActiveTabId()\"\r\n                          (ResourceRecordSaved)=\"SaveSingleWorkspaceItem(tab)\"\r\n                          (ContentLoadingStarted)=\"setTabContentLoadingStatus(tab, true)\"\r\n                          (ContentLoadingComplete)=\"setTabContentLoadingStatus(tab, false)\"\r\n                          ></app-resource>\r\n          </ng-template>\r\n        </kendo-tabstrip-tab>\r\n      </kendo-tabstrip>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n<div class=\"context-menu\" [ngStyle]=\"contextMenuStyle\" *ngIf=\"contextMenuVisible\">\r\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(1)\">Close All</div>\r\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(2)\">Close Others</div>\r\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(3)\">Close Tabs to the Right</div>\r\n </div>\r\n", styles: [".navigation-wrap {\r\n  height: calc(100vh - 80px);\r\n  width: 100%;\r\n  overflow:hidden\r\n}\r\n\r\n.nav-tab-title {\r\n  margin-left: 10px;\r\n}\r\n\r\n.context-menu {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  background-color: #ffffff;\r\n  border: 1px solid #ccc;\r\n  padding: 3px 3px;\r\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.context-menu-item {\r\n  padding: 8px 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.context-menu-item:hover {\r\n  background-color: #f1f1f1;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container {\r\n  padding: 20px;\r\n  background: #FAFAFA;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-content {\r\n  padding: 25px;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\r\n  background: #fafafa;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n  background: #fafafa;\r\n  border-radius: 0;\r\n}\r\n"] }]
+    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }, { type: i3.Location }, { type: i0.Renderer2 }, { type: i4.Title }, { type: i0.ChangeDetectorRef }], { applicationName: [{
+            type: Input
+        }], isMobileScreen: [{
+            type: HostBinding,
+            args: ['class.mobile-screen']
+        }], drawer: [{
+            type: ViewChild,
+            args: [DrawerComponent, { static: false }]
+        }], drawerWrapper: [{
+            type: ViewChild,
+            args: ['drawerWrapper', { static: false }]
+        }], tabstrip: [{
+            type: ViewChild,
+            args: ["tabstrip", { static: false }]
+        }], container: [{
+            type: ViewChild,
+            args: ['container', { static: true, read: ElementRef }]
+        }], onWindowResize: [{
+            type: HostListener,
+            args: ['window:resize']
+        }], onClick: [{
+            type: HostListener,
+            args: ['document:click']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavigationComponent, { className: "NavigationComponent", filePath: "src\\lib\\navigation\\navigation.component.ts", lineNumber: 28 }); })();