@memberjunction/ng-explorer-core 0.9.220 → 0.9.222

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

@@ -21,108 +21,121 @@ 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 i6 from "@progress/kendo-angular-buttons";
 import * as i7 from "@progress/kendo-angular-icons";
 import * as i8 from "@memberjunction/ng-container-directives";
-import * as i9 from "@memberjunction/ng-ask-skip";
-import * as i10 from "../generic/resource-container-component";
-import * as i11 from "../expansion-panel-component/expansion-panel-component";
+import * as i9 from "@progress/kendo-angular-layout";
+import * as i10 from "@memberjunction/ng-ask-skip";
+import * as i11 from "../generic/resource-container-component";
+import * as i12 from "../expansion-panel-component/expansion-panel-component";
 const _c0 = ["drawerWrapper"];
-const _c1 = ["tabstrip"];
-const _c2 = ["container"];
+const _c1 = ["container"];
+const _c2 = ["tabInnerContainer"];
 function NavigationComponent_kendo_loader_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "kendo-loader", 6);
 } }
 function NavigationComponent_kendo_drawer_container_3_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "expansion-panel-component", 16);
+    i0.ɵɵelement(1, "expansion-panel-component", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("items", ctx_r5.panelItems);
 } }
-function NavigationComponent_kendo_drawer_container_3_ng_template_8_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-svgicon", 17);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_ng_template_8_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.onTabContextMenu($event, 0)); });
+function NavigationComponent_kendo_drawer_container_3_button_6_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function NavigationComponent_kendo_drawer_container_3_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.scrollLeft()); });
+    i0.ɵɵtext(1, "\u21E6");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "span", 18);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_ng_template_8_Template_span_contextmenu_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.onTabContextMenu($event, 0)); });
-    i0.ɵɵtext(2, "Home");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("icon", ctx_r7.sharedService.kendoSVGIcon("home"));
-} }
-function NavigationComponent_kendo_drawer_container_3_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "router-outlet");
 } }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_kendo_svgicon_0_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-svgicon", 20);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_kendo_svgicon_0_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r21); const i_r14 = i0.ɵɵnextContext(2).index; const ctx_r19 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r19.onTabContextMenu($event, i_r14)); });
+function NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 25);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_1_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r19); const i_r14 = i0.ɵɵnextContext().index; const ctx_r17 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r17.onTabContextMenu($event, i_r14)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r17 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("icon", ctx_r17.sharedService.kendoSVGIcon("clock"));
+    const ctx_r15 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("icon", ctx_r15.sharedService.kendoSVGIcon("clock"));
 } }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-svgicon", 20);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_kendo_svgicon_1_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r24); const i_r14 = i0.ɵɵnextContext(2).index; const ctx_r22 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r22.onTabContextMenu($event, i_r14)); });
+function NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_2_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 25);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_2_Template_kendo_svgicon_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r22); const i_r14 = i0.ɵɵnextContext().index; const ctx_r20 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r20.onTabContextMenu($event, i_r14)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r13 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r18 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("icon", ctx_r18.sharedService.kendoSVGIcon(tab_r13.icon));
+    const tab_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r16 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("icon", ctx_r16.sharedService.kendoSVGIcon(tab_r13.icon));
 } }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵtemplate(0, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_kendo_svgicon_0_Template, 1, 1, "kendo-svgicon", 19)(1, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 19);
-    i0.ɵɵelementStart(2, "span", 18);
-    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_Template_span_contextmenu_2_listener($event) { i0.ɵɵrestoreView(_r28); const i_r14 = i0.ɵɵnextContext().index; const ctx_r26 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r26.onTabContextMenu($event, i_r14)); });
-    i0.ɵɵtext(3);
+function NavigationComponent_kendo_drawer_container_3_div_12_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function NavigationComponent_kendo_drawer_container_3_div_12_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r25); const tab_r13 = restoredCtx.$implicit; const ctx_r24 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r24.selectTab(tab_r13)); });
+    i0.ɵɵtemplate(1, NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 23)(2, NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_2_Template, 1, 1, "kendo-svgicon", 23);
+    i0.ɵɵelementStart(3, "span", 15);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_div_12_Template_span_contextmenu_3_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r25); const i_r14 = restoredCtx.index; const ctx_r26 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r26.onTabContextMenu($event, i_r14)); });
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 24);
+    i0.ɵɵlistener("click", function NavigationComponent_kendo_drawer_container_3_div_12_Template_span_click_5_listener() { const restoredCtx = i0.ɵɵrestoreView(_r25); const tab_r13 = restoredCtx.$implicit; const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.closeTab(tab_r13)); });
+    i0.ɵɵtext(6, "\u2716");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const tab_r13 = i0.ɵɵnextContext().$implicit;
+    const tab_r13 = ctx.$implicit;
+    const i_r14 = ctx.index;
+    const ctx_r8 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r8.activeTabIndex - 1 === i_r14 ? "single-tab-selected" : "");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", tab_r13 == null ? null : tab_r13.contentLoading);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !(tab_r13 == null ? null : tab_r13.contentLoading) && (tab_r13 == null ? null : tab_r13.icon));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(tab_r13.labelLoading ? "Loading..." : tab_r13.label);
 } }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-resource", 21);
-    i0.ɵɵlistener("ResourceRecordSaved", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_2_Template_app_resource_ResourceRecordSaved_0_listener() { i0.ɵɵrestoreView(_r32); const tab_r13 = i0.ɵɵnextContext().$implicit; const ctx_r30 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r30.SaveSingleWorkspaceItem(tab_r13)); })("ContentLoadingStarted", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_2_Template_app_resource_ContentLoadingStarted_0_listener() { i0.ɵɵrestoreView(_r32); const tab_r13 = i0.ɵɵnextContext().$implicit; const ctx_r33 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r33.setTabContentLoadingStatus(tab_r13, true)); })("ContentLoadingComplete", function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_2_Template_app_resource_ContentLoadingComplete_0_listener() { i0.ɵɵrestoreView(_r32); const tab_r13 = i0.ɵɵnextContext().$implicit; const ctx_r35 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r35.setTabContentLoadingStatus(tab_r13, false)); });
+function NavigationComponent_kendo_drawer_container_3_button_13_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function NavigationComponent_kendo_drawer_container_3_button_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r28 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r28.scrollRight()); });
+    i0.ɵɵtext(1, "\u21E8");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const tab_r13 = i0.ɵɵnextContext().$implicit;
-    const ctx_r16 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Data", tab_r13.data)("isVisible", (tab_r13 == null ? null : tab_r13.id) === ctx_r16.getActiveTabId());
 } }
-function NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 12);
-    i0.ɵɵtemplate(1, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_1_Template, 4, 3, "ng-template", 13)(2, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_ng_template_2_Template, 1, 2, "ng-template", 14);
-    i0.ɵɵelementEnd();
+function NavigationComponent_kendo_drawer_container_3_div_17_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "mj-resource", 27);
+    i0.ɵɵlistener("ResourceRecordSaved", function NavigationComponent_kendo_drawer_container_3_div_17_Template_mj_resource_ResourceRecordSaved_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r33); const tab_r30 = restoredCtx.$implicit; const ctx_r32 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r32.SaveSingleWorkspaceItem(tab_r30)); })("ContentLoadingStarted", function NavigationComponent_kendo_drawer_container_3_div_17_Template_mj_resource_ContentLoadingStarted_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r33); const tab_r30 = restoredCtx.$implicit; const ctx_r34 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r34.setTabContentLoadingStatus(tab_r30, true)); })("ContentLoadingComplete", function NavigationComponent_kendo_drawer_container_3_div_17_Template_mj_resource_ContentLoadingComplete_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r33); const tab_r30 = restoredCtx.$implicit; const ctx_r35 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r35.setTabContentLoadingStatus(tab_r30, false)); });
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const tab_r13 = ctx.$implicit;
-    const ctx_r9 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("selected", ctx_r9.isTabActive(tab_r13.id))("closable", true);
+    const tab_r30 = ctx.$implicit;
+    const i_r31 = ctx.index;
+    const ctx_r10 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("hidden", ctx_r10.activeTabIndex - 1 !== i_r31);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Data", tab_r30.data)("isVisible", ctx_r10.activeTabIndex - 1 === i_r31);
 } }
 function NavigationComponent_kendo_drawer_container_3_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
+    const _r37 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-drawer-container")(1, "kendo-drawer", 7, 8);
-    i0.ɵɵlistener("select", function NavigationComponent_kendo_drawer_container_3_Template_kendo_drawer_select_1_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.onDrawerSelect($event)); });
+    i0.ɵɵlistener("select", function NavigationComponent_kendo_drawer_container_3_Template_kendo_drawer_select_1_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.onDrawerSelect($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(3, NavigationComponent_kendo_drawer_container_3_div_3_Template, 2, 1, "div", 3);
-    i0.ɵɵelementStart(4, "kendo-drawer-content", 9)(5, "kendo-tabstrip", 10, 11);
-    i0.ɵɵlistener("tabClose", function NavigationComponent_kendo_drawer_container_3_Template_kendo_tabstrip_tabClose_5_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.onClose($event)); })("tabSelect", function NavigationComponent_kendo_drawer_container_3_Template_kendo_tabstrip_tabSelect_5_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.onTabSelect($event)); });
-    i0.ɵɵelementStart(7, "kendo-tabstrip-tab", 12);
-    i0.ɵɵtemplate(8, NavigationComponent_kendo_drawer_container_3_ng_template_8_Template, 3, 1, "ng-template", 13)(9, NavigationComponent_kendo_drawer_container_3_ng_template_9_Template, 1, 0, "ng-template", 14);
+    i0.ɵɵelementStart(4, "kendo-drawer-content", 9)(5, "div", 10);
+    i0.ɵɵtemplate(6, NavigationComponent_kendo_drawer_container_3_button_6_Template, 2, 0, "button", 11);
+    i0.ɵɵelementStart(7, "div", 12, 13)(9, "div", 14);
+    i0.ɵɵlistener("click", function NavigationComponent_kendo_drawer_container_3_Template_div_click_9_listener() { i0.ɵɵrestoreView(_r37); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.setActiveTabToHome()); });
+    i0.ɵɵelementStart(10, "span", 15);
+    i0.ɵɵlistener("contextmenu", function NavigationComponent_kendo_drawer_container_3_Template_span_contextmenu_10_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r39 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r39.onTabContextMenu($event, 0)); });
+    i0.ɵɵtext(11, "Home");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(12, NavigationComponent_kendo_drawer_container_3_div_12_Template, 7, 4, "div", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, NavigationComponent_kendo_drawer_container_3_button_13_Template, 2, 0, "button", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, NavigationComponent_kendo_drawer_container_3_kendo_tabstrip_tab_10_Template, 3, 2, "kendo-tabstrip-tab", 15);
+    i0.ɵɵelementStart(14, "div", 18)(15, "div", 19);
+    i0.ɵɵelement(16, "router-outlet");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(17, NavigationComponent_kendo_drawer_container_3_div_17_Template, 2, 3, "div", 20);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -130,25 +143,31 @@ function NavigationComponent_kendo_drawer_container_3_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("items", ctx_r2.drawerItems)("mode", ctx_r2.mode)("mini", ctx_r2.mini)("animation", false)("autoCollapse", false);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r2.showExpansionPanel);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r2.showLeftButton);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r2.activeTabIndex === 0 ? "single-tab-selected" : "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r2.tabs);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showRightButton);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("scrollable", true)("keepTabContent", true)("animate", false);
+    i0.ɵɵproperty("hidden", ctx_r2.activeTabIndex !== 0);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("selected", ctx_r2.activeTabIndex === 0)("closable", false);
-    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngForOf", ctx_r2.tabs);
 } }
 function NavigationComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23);
-    i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r43); const ctx_r42 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r42.handleContextMenuOption(1)); });
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
+    i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r41); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.handleContextMenuOption(1)); });
     i0.ɵɵtext(2, "Close All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 23);
-    i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r43); const ctx_r44 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r44.handleContextMenuOption(2)); });
+    i0.ɵɵelementStart(3, "div", 29);
+    i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r41); const ctx_r42 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r42.handleContextMenuOption(2)); });
     i0.ɵɵtext(4, "Close Others");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 23);
-    i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r43); const ctx_r45 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r45.handleContextMenuOption(3)); });
+    i0.ɵɵelementStart(5, "div", 29);
+    i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r41); const ctx_r43 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r43.handleContextMenuOption(3)); });
     i0.ɵɵtext(6, "Close Tabs to the Right");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -201,12 +220,43 @@ export class NavigationComponent {
         this.isMobileScreen = false;
         this.contextMenuStyle = {};
         this.contextMenuVisible = false;
+        this.showLeftButton = false;
+        this.showRightButton = false;
         this._loggedIn = false;
         this._earlyEvents = [];
         this.gotFirstNav = false;
         this._mostRecentURL = '';
         this.tabs = [];
     }
+    onResize(event) {
+        this.checkTabScrollButtons();
+    }
+    checkTabScrollButtons() {
+        if (this.tabInnerContainer && this.tabInnerContainer.nativeElement && this.tabInnerContainer.nativeElement.parentElement) {
+            const container = this.tabInnerContainer.nativeElement;
+            const parent = container.parentElement;
+            const currentLeft = container.style.left ? parseInt(container.style.left) : 0;
+            // show the right button if the container is wider than the parent AND the left position(which is zero or negative) + the container width is greater than the parent width
+            this.showRightButton = container.clientWidth > parent.clientWidth &&
+                currentLeft + container.clientWidth > parent.clientWidth;
+            // Show left button if left position is less than 0, meaning some of the left side of the container is off screen
+            this.showLeftButton = currentLeft < 0;
+        }
+    }
+    scrollTabHeader(scrollAmount) {
+        const style = this.tabInnerContainer.nativeElement.style;
+        if (style) {
+            const curLeft = style.left ? parseInt(style.left) : 0;
+            style.left = (curLeft + scrollAmount) + 'px';
+            this.checkTabScrollButtons(); // can do immediately because the above is direct DOM manipulation so the effect is immediate
+        }
+    }
+    scrollLeft() {
+        this.scrollTabHeader(150);
+    }
+    scrollRight() {
+        this.scrollTabHeader(-150);
+    }
     onTabContextMenu(event, tab) {
         event.preventDefault();
         this.selectedTabIndex = tab;
@@ -255,7 +305,7 @@ export class NavigationComponent {
             yield transGroup.Submit();
             if (this.activeTabIndex > this.tabs.length)
                 this.activeTabIndex = this.tabs.length - 1;
-            this.tabstrip.selectTab(this.activeTabIndex);
+            //this.tabstrip.selectTab(this.activeTabIndex);
             if (this.activeTabIndex === 0) {
                 // 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';
@@ -269,6 +319,9 @@ export class NavigationComponent {
         this.isMobileScreen = window.innerWidth <= 840;
     }
     ngAfterViewInit() {
+        // check tab scroll buttons and bind to resize
+        this.checkTabScrollButtons();
+        window.addEventListener('resize', this.checkTabScrollButtons.bind(this));
         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);
@@ -376,7 +429,7 @@ export class NavigationComponent {
                 // 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()));
+                const item = di.find(i => { var _a; return url.toLowerCase().trim().startsWith((_a = i.path) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim()); });
                 if (item) {
                     this.selectDrawerItem(this.drawerItems.indexOf(item));
                     this.gotFirstNav = true;
@@ -422,10 +475,30 @@ export class NavigationComponent {
         this.setActiveTabToHome();
     }
     setActiveTabToHome() {
-        if (this.activeTabIndex !== 0) {
-            this.activeTabIndex = 0;
-            this.tabstrip.selectTab(0);
-            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
+        this.selectTab(null);
+    }
+    selectTab(tab) {
+        // get index from the tabs array
+        const index = tab ? this.tabs.indexOf(tab) + 1 : 0; // add one because the HOME tab is not in the array so we have to offset by 1 here for our data structure
+        if (this.activeTabIndex !== index) {
+            this.activeTabIndex = index;
+            this.sharedService.InvokeManualResize();
+            if (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.setAppTitle();
+                this._mostRecentURL = url;
+            }
+            else {
+                const tab = this.tabs[index - 1];
+                if (tab) {
+                    this.setAppTitle(tab.label);
+                    const data = tab.data;
+                    this.updateBrowserURL(tab, data);
+                }
+            }
         }
     }
     checkForBaseURL() {
@@ -500,6 +573,7 @@ export class NavigationComponent {
                     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);
+                    this.checkTabScrollButtons();
                 }), 10);
             }));
         });
@@ -551,7 +625,7 @@ export class NavigationComponent {
             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.tabstrip.selectTab(this.activeTabIndex);
                 this.scrollIntoView();
                 if (existingTab.label)
                     this.setAppTitle(existingTab.label);
@@ -574,7 +648,7 @@ export class NavigationComponent {
                 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.tabstrip.selectTab(this.activeTabIndex);
                 //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
                 this.sharedService.InvokeManualResize();
                 this.scrollIntoView();
@@ -663,11 +737,11 @@ export class NavigationComponent {
         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);
+        // 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* () {
@@ -731,50 +805,38 @@ export class NavigationComponent {
         tab.contentLoading = bLoading;
         this.cdr.detectChanges(); // Manually trigger change detection
     }
-    onClose(ev) {
+    closeTab(tab) {
         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], null /*no transaction group*/);
-                    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);
-                        }
+            const tabIndex = this.tabs.indexOf(tab);
+            if (tabIndex >= 0) {
+                yield this.removeWorkspaceItem(this.tabs[tabIndex], null /*no transaction group*/);
+                // now, check to see how many tabs we have left and if we have none, then we need to select the HOME tab
+                if (this.tabs.length > 0) {
+                    if (tabIndex > this.tabs.length) {
+                        // we're closing the last tab, so select the tab to the left of it
+                        this.activeTabIndex = 1 + (tabIndex - 1); // always add 1 to reflect the HOME tab that is not in the tabs array but it IS part of our tab structure
                     }
                     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;
-                        }
+                        // we're closing a tab that is not the last tab, so we need to select the tab to the right of it
+                        this.activeTabIndex = 1 + (tabIndex + 1); // always add 1 to reflect the HOME tab that is not in the tabs array but it IS part of our tab structure
+                    }
+                    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);
                     }
-                }), 100);
+                }
+                else {
+                    // the tab that will be selected is the HOME tab o we need to update
+                    this.activeTabIndex = 0;
+                    // 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;
+                }
             }
         });
     }
@@ -805,30 +867,6 @@ export class NavigationComponent {
             }
         });
     }
-    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) {
@@ -854,7 +892,7 @@ export class NavigationComponent {
         // 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.tabstrip.selectTab(0);
             //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
         }
         this.setAppTitle(ev.item.text);
@@ -1041,21 +1079,21 @@ NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new
 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);
+        i0.ɵɵviewQuery(_c1, 7, ElementRef);
+        i0.ɵɵviewQuery(_c2, 5);
     } 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);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabInnerContainer = _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);
+        i0.ɵɵlistener("resize", function NavigationComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, 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: 6, vars: 6, consts: [[1, "navigation-wrap", 3, "ngClass"], ["drawerWrapper", ""], ["type", "converging-spinner", 4, "ngIf"], [4, "ngIf"], ["action", "route"], ["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"], [3, "items"], ["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) {
+    } }, inputs: { applicationName: "applicationName" }, decls: 6, vars: 6, consts: [[1, "navigation-wrap", 3, "ngClass"], ["drawerWrapper", ""], ["type", "converging-spinner", 4, "ngIf"], [4, "ngIf"], ["action", "route"], ["class", "context-menu", 3, "ngStyle", 4, "ngIf"], ["type", "converging-spinner"], [3, "items", "mode", "mini", "animation", "autoCollapse", "select"], ["drawer", ""], ["mjFillContainer", ""], [1, "tab-header-outer"], ["kendoButton", "", "class", "tab-scroll-button-left", 3, "click", 4, "ngIf"], [1, "tab-header-inner"], ["tabInnerContainer", ""], [1, "single-tab", 3, "ngClass", "click"], [1, "nav-tab-title", 3, "contextmenu"], ["class", "single-tab", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], ["kendoButton", "", "class", "tab-scroll-button-right", 3, "click", 4, "ngIf"], ["mjFillContainer", "", 1, "tab-body"], ["mjFillContainer", "", 1, "single-tab-body", 3, "hidden"], ["class", "single-tab-body", "mjFillContainer", "", 3, "hidden", 4, "ngFor", "ngForOf"], [3, "items"], ["kendoButton", "", 1, "tab-scroll-button-left", 3, "click"], [3, "icon", "contextmenu", 4, "ngIf"], [1, "tab-close-button", 3, "click"], [3, "icon", "contextmenu"], ["kendoButton", "", 1, "tab-scroll-button-right", 3, "click"], [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, 11, 12, "kendo-drawer-container", 3);
+        i0.ɵɵtemplate(2, NavigationComponent_kendo_loader_2_Template, 1, 0, "kendo-loader", 2)(3, NavigationComponent_kendo_drawer_container_3_Template, 18, 12, "kendo-drawer-container", 3);
         i0.ɵɵelement(4, "mj-skip-button", 4);
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(5, NavigationComponent_div_5_Template, 7, 1, "div", 5);
@@ -1067,10 +1105,10 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
         i0.ɵɵproperty("ngIf", !ctx.loading);
         i0.ɵɵadvance(2);
         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.SkipButtonComponent, i10.ResourceContainerComponent, i11.ExpansionPanelComponent], 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  background: var(--gray-color);\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: var(--med-gray);\r\n  padding-left: 20px;\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\r\n  border: 1px solid var(--light-gray);\r\n  background: var(--light-gray);\r\n  border-radius: 8px 8px 0 0;\r\n  color: var(--blue-text);\r\n\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\r\n  color: var(--blue-text);\r\n}\r\n\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n\r\n  background: var(--med-gray);\r\n  border-radius: 0;\r\n  border-right: 1px solid #909090;\r\n}"] });
+    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i3.NgStyle, i1.RouterOutlet, i5.LoaderComponent, i6.ButtonComponent, i7.SVGIconComponent, i8.FillContainer, i9.DrawerComponent, i9.DrawerContainerComponent, i9.DrawerContentComponent, i10.SkipButtonComponent, i11.ResourceContainerComponent, i12.ExpansionPanelComponent], 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  background: var(--gray-color);\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: var(--med-gray);\r\n  padding-left: 20px;\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\r\n  border: 1px solid var(--light-gray);\r\n  background: var(--light-gray);\r\n  border-radius: 8px 8px 0 0;\r\n  color: var(--blue-text);\r\n\r\n}\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\r\n  color: var(--blue-text);\r\n}\r\n\r\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n\r\n  background: var(--med-gray);\r\n  border-radius: 0;\r\n  border-right: 1px solid #909090;\r\n}\r\n\r\n\r\n\r\n\r\n\n\r\n.tab-header-outer[_ngcontent-%COMP%] {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  overflow: hidden; \n\r\n  background-color: #D5D8E5;\r\n}\r\n\r\n.tab-header-inner[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  flex-direction: row;\r\n  white-space: nowrap; \n\r\n  position: relative; \n\r\n  z-index: 1; \n\r\n\r\n  padding-left: 5px;\r\n  padding-top: 5px;\r\n  background-color: #D5D8E5;\r\n  border-bottom: #F5F6FA;\r\n}\r\n\r\n.tab-scroll-button-left[_ngcontent-%COMP%], .tab-scroll-button-right[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 2; \n\r\n}\r\n\r\n.tab-scroll-button-left[_ngcontent-%COMP%] {\r\n  left: 0;\r\n}\r\n\r\n.tab-scroll-button-right[_ngcontent-%COMP%] {\r\n  right: 0;\r\n}\r\n\r\n\r\n.single-tab[_ngcontent-%COMP%] {\r\n  flex: 0 0 auto; \n\r\n  \n\r\n}\r\n\r\n\r\n.tab-body[_ngcontent-%COMP%] {\r\n  border-top: 0;\r\n  background-color: #F5F6FA;    \r\n  display: flex;\r\n  width: 100%;\r\n  height: 200px;\r\n}\r\n.single-tab[_ngcontent-%COMP%] {\r\n  cursor: pointer;\r\n  height: 26px;\r\n  margin-right: 1px;\r\n  padding-left: 10px;\r\n  padding-right: 10px;\r\n  padding-top: 5px;\r\n  border-radius: 8px 8px 0 0;\r\n  border-top: solid 1px #D5D8E5;;\r\n  border-left: solid 1px #D5D8E5;;\r\n  border-right: solid 1px #D5D8E5;;\r\n  border-bottom: 0;\r\n  background-color: #D5D8E5;\r\n  font-size: 14px;\r\n}\r\n.single-tab[_ngcontent-%COMP%]:hover {\r\n  color: blue;\r\n}\r\n.single-tab-selected[_ngcontent-%COMP%] {\r\n  background-color: #F5F6FA;\r\n  font-weight: bold;\r\n}\r\n\r\n.tab-close-button[_ngcontent-%COMP%] {\r\n  cursor: pointer;\r\n  margin-left: 10px;\r\n  padding: 2px;\r\n}\r\n.tab-close-button[_ngcontent-%COMP%]:hover {\r\n  background-color: #526ff3;\r\n  color: black;\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    <div *ngIf=\"showExpansionPanel\">\r\n      <expansion-panel-component [items]=\"panelItems\" />\r\n    </div>\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\r\n  \r\n  <mj-skip-button\r\n    action=\"route\"\r\n  ></mj-skip-button>\r\n  <!-- Skip Button shows up through the above line of code -->\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  background: var(--gray-color);\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: var(--med-gray);\r\n  padding-left: 20px;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\r\n  border: 1px solid var(--light-gray);\r\n  background: var(--light-gray);\r\n  border-radius: 8px 8px 0 0;\r\n  color: var(--blue-text);\r\n\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\r\n  color: var(--blue-text);\r\n}\r\n\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n\r\n  background: var(--med-gray);\r\n  border-radius: 0;\r\n  border-right: 1px solid #909090;\r\n}"] }]
+        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    <div *ngIf=\"showExpansionPanel\">\r\n      <expansion-panel-component [items]=\"panelItems\" />\r\n    </div>\r\n    <kendo-drawer-content mjFillContainer>\r\n      <!--\r\n          TEST TAB SECTION\r\n      -->\r\n\r\n      <!--TAB HEADER-->\r\n      <div class=\"tab-header-outer\">\r\n        <button kendoButton *ngIf=\"showLeftButton\" class=\"tab-scroll-button-left\" (click)=\"scrollLeft()\">\u21E6</button>\r\n        <div class=\"tab-header-inner\" #tabInnerContainer>\r\n          <div class=\"single-tab\"\r\n              [ngClass]=\"activeTabIndex === 0 ? 'single-tab-selected' : ''\"\r\n              (click)=\"setActiveTabToHome()\">\r\n              <span class=\"nav-tab-title\" (contextmenu)=\"onTabContextMenu($event, 0)\">Home</span>\r\n          </div>\r\n          <div *ngFor=\"let tab of tabs; let i = index\" class=\"single-tab\"\r\n                [ngClass]=\"activeTabIndex - 1 === i ? 'single-tab-selected' : ''\"\r\n                (click)=\"selectTab(tab)\">\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              <span class=\"tab-close-button\" (click)=\"closeTab(tab)\" >\u2716</span>\r\n          </div>\r\n        </div>  \r\n        <button kendoButton *ngIf=\"showRightButton\" class=\"tab-scroll-button-right\" (click)=\"scrollRight()\">\u21E8</button>\r\n      </div>\r\n      <!--TAB BODY-->\r\n      <div class=\"tab-body\" mjFillContainer>\r\n        <div class=\"single-tab-body\" \r\n            [hidden]=\"activeTabIndex !== 0\" \r\n            mjFillContainer >\r\n          <router-outlet></router-outlet>\r\n        </div>\r\n        <div *ngFor=\"let tab of tabs; let i = index\" class=\"single-tab-body\" \r\n            [hidden]=\"activeTabIndex -1 !== i\"\r\n            mjFillContainer >\r\n          <mj-resource [Data]=\"tab.data\"\r\n                        [isVisible]=\"activeTabIndex -1 === i\" \r\n                        (ResourceRecordSaved)=\"SaveSingleWorkspaceItem(tab)\"\r\n                        (ContentLoadingStarted)=\"setTabContentLoadingStatus(tab, true)\"\r\n                        (ContentLoadingComplete)=\"setTabContentLoadingStatus(tab, false)\"\r\n                        >\r\n          </mj-resource>\r\n        </div>\r\n      </div>\r\n\r\n      <!--\r\n          END OF TEST TAB SECTION\r\n      -->\r\n<!-- \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\r\n  \r\n  <mj-skip-button\r\n    action=\"route\"\r\n  ></mj-skip-button>\r\n  <!-- Skip Button shows up through the above line of code -->\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  background: var(--gray-color);\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: var(--med-gray);\r\n  padding-left: 20px;\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\r\n  border: 1px solid var(--light-gray);\r\n  background: var(--light-gray);\r\n  border-radius: 8px 8px 0 0;\r\n  color: var(--blue-text);\r\n\r\n}\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\r\n  color: var(--blue-text);\r\n}\r\n\r\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\r\n\r\n  background: var(--med-gray);\r\n  border-radius: 0;\r\n  border-right: 1px solid #909090;\r\n}\r\n\r\n\r\n/***\r\n* TEST TAB AREA *\r\n***/\r\n.tab-header-outer {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  overflow: hidden; /* Hide the overflow */\r\n  background-color: #D5D8E5;\r\n}\r\n\r\n.tab-header-inner {\r\n  display: flex;\r\n  flex-direction: row;\r\n  white-space: nowrap; /* Prevent wrapping of tabs */\r\n  position: relative; /* Needed for z-index to work */\r\n  z-index: 1; /* Place tabs above the content */\r\n\r\n  padding-left: 5px;\r\n  padding-top: 5px;\r\n  background-color: #D5D8E5;\r\n  border-bottom: #F5F6FA;\r\n}\r\n\r\n.tab-scroll-button-left, .tab-scroll-button-right {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 2; /* Ensure buttons are above the content */\r\n}\r\n\r\n.tab-scroll-button-left {\r\n  left: 0;\r\n}\r\n\r\n.tab-scroll-button-right {\r\n  right: 0;\r\n}\r\n\r\n\r\n.single-tab {\r\n  flex: 0 0 auto; /* Prevent tabs from shrinking */\r\n  /* Style your tabs as needed */\r\n}\r\n\r\n\r\n.tab-body {\r\n  border-top: 0;\r\n  background-color: #F5F6FA;    \r\n  display: flex;\r\n  width: 100%;\r\n  height: 200px;\r\n}\r\n.single-tab {\r\n  cursor: pointer;\r\n  height: 26px;\r\n  margin-right: 1px;\r\n  padding-left: 10px;\r\n  padding-right: 10px;\r\n  padding-top: 5px;\r\n  border-radius: 8px 8px 0 0;\r\n  border-top: solid 1px #D5D8E5;;\r\n  border-left: solid 1px #D5D8E5;;\r\n  border-right: solid 1px #D5D8E5;;\r\n  border-bottom: 0;\r\n  background-color: #D5D8E5;\r\n  font-size: 14px;\r\n}\r\n.single-tab:hover {\r\n  color: blue;\r\n}\r\n.single-tab-selected {\r\n  background-color: #F5F6FA;\r\n  font-weight: bold;\r\n}\r\n\r\n.tab-close-button {\r\n  cursor: pointer;\r\n  margin-left: 10px;\r\n  padding: 2px;\r\n}\r\n.tab-close-button:hover {\r\n  background-color: #526ff3;\r\n  color: black;\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: [{
@@ -1082,9 +1120,6 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
         }], drawerWrapper: [{
             type: ViewChild,
             args: ['drawerWrapper', { static: false }]
-        }], tabstrip: [{
-            type: ViewChild,
-            args: ["tabstrip", { static: false }]
         }], container: [{
             type: ViewChild,
             args: ['container', { static: true, read: ElementRef }]
@@ -1094,5 +1129,11 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
         }], onClick: [{
             type: HostListener,
             args: ['document:click']
+        }], tabInnerContainer: [{
+            type: ViewChild,
+            args: ['tabInnerContainer']
+        }], onResize: [{
+            type: HostListener,
+            args: ['window:resize', ['$event']]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavigationComponent, { className: "NavigationComponent", filePath: "src\\lib\\navigation\\navigation.component.ts", lineNumber: 30 }); })();