@memberjunction/ng-explorer-core 0.9.222 → 0.9.224

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -21,121 +21,83 @@ import * as i2 from "@memberjunction/ng-shared";
21
21
  import * as i3 from "@angular/common";
22
22
  import * as i4 from "@angular/platform-browser";
23
23
  import * as i5 from "@progress/kendo-angular-indicators";
24
- import * as i6 from "@progress/kendo-angular-buttons";
25
- import * as i7 from "@progress/kendo-angular-icons";
26
- import * as i8 from "@memberjunction/ng-container-directives";
27
- import * as i9 from "@progress/kendo-angular-layout";
28
- import * as i10 from "@memberjunction/ng-ask-skip";
24
+ import * as i6 from "@progress/kendo-angular-icons";
25
+ import * as i7 from "@memberjunction/ng-container-directives";
26
+ import * as i8 from "@progress/kendo-angular-layout";
27
+ import * as i9 from "@memberjunction/ng-ask-skip";
28
+ import * as i10 from "@memberjunction/ng-tabstrip";
29
29
  import * as i11 from "../generic/resource-container-component";
30
30
  import * as i12 from "../expansion-panel-component/expansion-panel-component";
31
- const _c0 = ["drawerWrapper"];
32
- const _c1 = ["container"];
33
- const _c2 = ["tabInnerContainer"];
31
+ const _c0 = ["mjTabstrip"];
32
+ const _c1 = ["drawerWrapper"];
33
+ const _c2 = ["container"];
34
34
  function NavigationComponent_kendo_loader_2_Template(rf, ctx) { if (rf & 1) {
35
35
  i0.ɵɵelement(0, "kendo-loader", 6);
36
36
  } }
37
37
  function NavigationComponent_kendo_drawer_container_3_div_3_Template(rf, ctx) { if (rf & 1) {
38
38
  i0.ɵɵelementStart(0, "div");
39
- i0.ɵɵelement(1, "expansion-panel-component", 21);
39
+ i0.ɵɵelement(1, "expansion-panel-component", 15);
40
40
  i0.ɵɵelementEnd();
41
41
  } if (rf & 2) {
42
42
  const ctx_r5 = i0.ɵɵnextContext(2);
43
43
  i0.ɵɵadvance();
44
44
  i0.ɵɵproperty("items", ctx_r5.panelItems);
45
45
  } }
46
- function NavigationComponent_kendo_drawer_container_3_button_6_Template(rf, ctx) { if (rf & 1) {
47
- const _r12 = i0.ɵɵgetCurrentView();
48
- i0.ɵɵelementStart(0, "button", 22);
49
- 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()); });
50
- i0.ɵɵtext(1, "\u21E6");
51
- i0.ɵɵelementEnd();
52
- } }
53
- function NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
54
- const _r19 = i0.ɵɵgetCurrentView();
55
- i0.ɵɵelementStart(0, "kendo-svgicon", 25);
56
- 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)); });
57
- i0.ɵɵelementEnd();
46
+ function NavigationComponent_kendo_drawer_container_3_mj_tab_11_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
47
+ i0.ɵɵelement(0, "kendo-svgicon", 17);
58
48
  } if (rf & 2) {
59
- const ctx_r15 = i0.ɵɵnextContext(3);
60
- i0.ɵɵproperty("icon", ctx_r15.sharedService.kendoSVGIcon("clock"));
49
+ const ctx_r11 = i0.ɵɵnextContext(3);
50
+ i0.ɵɵproperty("icon", ctx_r11.sharedService.kendoSVGIcon("clock"));
61
51
  } }
62
- function NavigationComponent_kendo_drawer_container_3_div_12_kendo_svgicon_2_Template(rf, ctx) { if (rf & 1) {
63
- const _r22 = i0.ɵɵgetCurrentView();
64
- i0.ɵɵelementStart(0, "kendo-svgicon", 25);
65
- 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)); });
66
- i0.ɵɵelementEnd();
52
+ function NavigationComponent_kendo_drawer_container_3_mj_tab_11_kendo_svgicon_2_Template(rf, ctx) { if (rf & 1) {
53
+ i0.ɵɵelement(0, "kendo-svgicon", 17);
67
54
  } if (rf & 2) {
68
- const tab_r13 = i0.ɵɵnextContext().$implicit;
69
- const ctx_r16 = i0.ɵɵnextContext(2);
70
- i0.ɵɵproperty("icon", ctx_r16.sharedService.kendoSVGIcon(tab_r13.icon));
55
+ const tab_r9 = i0.ɵɵnextContext().$implicit;
56
+ const ctx_r12 = i0.ɵɵnextContext(2);
57
+ i0.ɵɵproperty("icon", ctx_r12.sharedService.kendoSVGIcon(tab_r9.icon));
71
58
  } }
72
- function NavigationComponent_kendo_drawer_container_3_div_12_Template(rf, ctx) { if (rf & 1) {
73
- const _r25 = i0.ɵɵgetCurrentView();
74
- i0.ɵɵelementStart(0, "div", 14);
75
- 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)); });
76
- 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);
77
- i0.ɵɵelementStart(3, "span", 15);
78
- 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)); });
79
- i0.ɵɵtext(4);
59
+ function NavigationComponent_kendo_drawer_container_3_mj_tab_11_Template(rf, ctx) { if (rf & 1) {
60
+ i0.ɵɵelementStart(0, "mj-tab", 12);
61
+ i0.ɵɵtemplate(1, NavigationComponent_kendo_drawer_container_3_mj_tab_11_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 16)(2, NavigationComponent_kendo_drawer_container_3_mj_tab_11_kendo_svgicon_2_Template, 1, 1, "kendo-svgicon", 16);
62
+ i0.ɵɵtext(3);
80
63
  i0.ɵɵelementEnd();
81
- i0.ɵɵelementStart(5, "span", 24);
82
- 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)); });
83
- i0.ɵɵtext(6, "\u2716");
84
- i0.ɵɵelementEnd()();
85
64
  } if (rf & 2) {
86
- const tab_r13 = ctx.$implicit;
87
- const i_r14 = ctx.index;
88
- const ctx_r8 = i0.ɵɵnextContext(2);
89
- i0.ɵɵproperty("ngClass", ctx_r8.activeTabIndex - 1 === i_r14 ? "single-tab-selected" : "");
65
+ const tab_r9 = ctx.$implicit;
66
+ i0.ɵɵproperty("TabCloseable", true);
90
67
  i0.ɵɵadvance();
91
- i0.ɵɵproperty("ngIf", tab_r13 == null ? null : tab_r13.contentLoading);
68
+ i0.ɵɵproperty("ngIf", tab_r9 == null ? null : tab_r9.contentLoading);
92
69
  i0.ɵɵadvance();
93
- i0.ɵɵproperty("ngIf", !(tab_r13 == null ? null : tab_r13.contentLoading) && (tab_r13 == null ? null : tab_r13.icon));
94
- i0.ɵɵadvance(2);
95
- i0.ɵɵtextInterpolate(tab_r13.labelLoading ? "Loading..." : tab_r13.label);
96
- } }
97
- function NavigationComponent_kendo_drawer_container_3_button_13_Template(rf, ctx) { if (rf & 1) {
98
- const _r29 = i0.ɵɵgetCurrentView();
99
- i0.ɵɵelementStart(0, "button", 26);
100
- 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()); });
101
- i0.ɵɵtext(1, "\u21E8");
102
- i0.ɵɵelementEnd();
70
+ i0.ɵɵproperty("ngIf", !(tab_r9 == null ? null : tab_r9.contentLoading) && (tab_r9 == null ? null : tab_r9.icon));
71
+ i0.ɵɵadvance();
72
+ i0.ɵɵtextInterpolate1(" ", tab_r9.labelLoading ? "Loading..." : tab_r9.label, " ");
103
73
  } }
104
- function NavigationComponent_kendo_drawer_container_3_div_17_Template(rf, ctx) { if (rf & 1) {
105
- const _r33 = i0.ɵɵgetCurrentView();
106
- i0.ɵɵelementStart(0, "div", 19)(1, "mj-resource", 27);
107
- 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)); });
74
+ function NavigationComponent_kendo_drawer_container_3_mj_tab_body_12_Template(rf, ctx) { if (rf & 1) {
75
+ const _r17 = i0.ɵɵgetCurrentView();
76
+ i0.ɵɵelementStart(0, "mj-tab-body")(1, "mj-resource", 18);
77
+ i0.ɵɵlistener("ResourceRecordSaved", function NavigationComponent_kendo_drawer_container_3_mj_tab_body_12_Template_mj_resource_ResourceRecordSaved_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r17); const tab_r14 = restoredCtx.$implicit; const ctx_r16 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r16.SaveSingleWorkspaceItem(tab_r14)); })("ContentLoadingStarted", function NavigationComponent_kendo_drawer_container_3_mj_tab_body_12_Template_mj_resource_ContentLoadingStarted_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r17); const tab_r14 = restoredCtx.$implicit; const ctx_r18 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r18.setTabContentLoadingStatus(tab_r14, true)); })("ContentLoadingComplete", function NavigationComponent_kendo_drawer_container_3_mj_tab_body_12_Template_mj_resource_ContentLoadingComplete_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r17); const tab_r14 = restoredCtx.$implicit; const ctx_r19 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r19.setTabContentLoadingStatus(tab_r14, false)); });
108
78
  i0.ɵɵelementEnd()();
109
79
  } if (rf & 2) {
110
- const tab_r30 = ctx.$implicit;
111
- const i_r31 = ctx.index;
112
- const ctx_r10 = i0.ɵɵnextContext(2);
113
- i0.ɵɵproperty("hidden", ctx_r10.activeTabIndex - 1 !== i_r31);
80
+ const tab_r14 = ctx.$implicit;
81
+ const i_r15 = ctx.index;
82
+ const ctx_r8 = i0.ɵɵnextContext(2);
114
83
  i0.ɵɵadvance();
115
- i0.ɵɵproperty("Data", tab_r30.data)("isVisible", ctx_r10.activeTabIndex - 1 === i_r31);
84
+ i0.ɵɵproperty("Data", tab_r14.data)("isVisible", ctx_r8.activeTabIndex - 1 === i_r15);
116
85
  } }
117
86
  function NavigationComponent_kendo_drawer_container_3_Template(rf, ctx) { if (rf & 1) {
118
- const _r37 = i0.ɵɵgetCurrentView();
87
+ const _r21 = i0.ɵɵgetCurrentView();
119
88
  i0.ɵɵelementStart(0, "kendo-drawer-container")(1, "kendo-drawer", 7, 8);
120
- 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)); });
89
+ i0.ɵɵlistener("select", function NavigationComponent_kendo_drawer_container_3_Template_kendo_drawer_select_1_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.onDrawerSelect($event)); });
121
90
  i0.ɵɵelementEnd();
122
91
  i0.ɵɵtemplate(3, NavigationComponent_kendo_drawer_container_3_div_3_Template, 2, 1, "div", 3);
123
- i0.ɵɵelementStart(4, "kendo-drawer-content", 9)(5, "div", 10);
124
- i0.ɵɵtemplate(6, NavigationComponent_kendo_drawer_container_3_button_6_Template, 2, 0, "button", 11);
125
- i0.ɵɵelementStart(7, "div", 12, 13)(9, "div", 14);
126
- 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()); });
127
- i0.ɵɵelementStart(10, "span", 15);
128
- 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)); });
129
- i0.ɵɵtext(11, "Home");
130
- i0.ɵɵelementEnd()();
131
- i0.ɵɵtemplate(12, NavigationComponent_kendo_drawer_container_3_div_12_Template, 7, 4, "div", 16);
132
- i0.ɵɵelementEnd();
133
- i0.ɵɵtemplate(13, NavigationComponent_kendo_drawer_container_3_button_13_Template, 2, 0, "button", 17);
92
+ i0.ɵɵelementStart(4, "kendo-drawer-content", 9)(5, "mj-tabstrip", 10, 11);
93
+ i0.ɵɵlistener("TabClosed", function NavigationComponent_kendo_drawer_container_3_Template_mj_tabstrip_TabClosed_5_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.handleTabClosed($event)); })("TabSelected", function NavigationComponent_kendo_drawer_container_3_Template_mj_tabstrip_TabSelected_5_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.handleTabSelected($event)); })("TabContextMenu", function NavigationComponent_kendo_drawer_container_3_Template_mj_tabstrip_TabContextMenu_5_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.handleTabContextMenu($event)); });
94
+ i0.ɵɵelementStart(7, "mj-tab", 12);
95
+ i0.ɵɵtext(8, " Home ");
134
96
  i0.ɵɵelementEnd();
135
- i0.ɵɵelementStart(14, "div", 18)(15, "div", 19);
136
- i0.ɵɵelement(16, "router-outlet");
97
+ i0.ɵɵelementStart(9, "mj-tab-body");
98
+ i0.ɵɵelement(10, "router-outlet");
137
99
  i0.ɵɵelementEnd();
138
- i0.ɵɵtemplate(17, NavigationComponent_kendo_drawer_container_3_div_17_Template, 2, 3, "div", 20);
100
+ i0.ɵɵtemplate(11, NavigationComponent_kendo_drawer_container_3_mj_tab_11_Template, 4, 4, "mj-tab", 13)(12, NavigationComponent_kendo_drawer_container_3_mj_tab_body_12_Template, 2, 2, "mj-tab-body", 14);
139
101
  i0.ɵɵelementEnd()()();
140
102
  } if (rf & 2) {
141
103
  const ctx_r2 = i0.ɵɵnextContext();
@@ -143,31 +105,25 @@ function NavigationComponent_kendo_drawer_container_3_Template(rf, ctx) { if (rf
143
105
  i0.ɵɵproperty("items", ctx_r2.drawerItems)("mode", ctx_r2.mode)("mini", ctx_r2.mini)("animation", false)("autoCollapse", false);
144
106
  i0.ɵɵadvance(2);
145
107
  i0.ɵɵproperty("ngIf", ctx_r2.showExpansionPanel);
146
- i0.ɵɵadvance(3);
147
- i0.ɵɵproperty("ngIf", ctx_r2.showLeftButton);
148
- i0.ɵɵadvance(3);
149
- i0.ɵɵproperty("ngClass", ctx_r2.activeTabIndex === 0 ? "single-tab-selected" : "");
150
- i0.ɵɵadvance(3);
108
+ i0.ɵɵadvance(4);
109
+ i0.ɵɵproperty("TabCloseable", false);
110
+ i0.ɵɵadvance(4);
151
111
  i0.ɵɵproperty("ngForOf", ctx_r2.tabs);
152
112
  i0.ɵɵadvance();
153
- i0.ɵɵproperty("ngIf", ctx_r2.showRightButton);
154
- i0.ɵɵadvance(2);
155
- i0.ɵɵproperty("hidden", ctx_r2.activeTabIndex !== 0);
156
- i0.ɵɵadvance(2);
157
113
  i0.ɵɵproperty("ngForOf", ctx_r2.tabs);
158
114
  } }
159
115
  function NavigationComponent_div_5_Template(rf, ctx) { if (rf & 1) {
160
- const _r41 = i0.ɵɵgetCurrentView();
161
- i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
162
- 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)); });
116
+ const _r26 = i0.ɵɵgetCurrentView();
117
+ i0.ɵɵelementStart(0, "div", 19)(1, "div", 20);
118
+ i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r26); const ctx_r25 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r25.handleContextMenuOption(1)); });
163
119
  i0.ɵɵtext(2, "Close All");
164
120
  i0.ɵɵelementEnd();
165
- i0.ɵɵelementStart(3, "div", 29);
166
- 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)); });
121
+ i0.ɵɵelementStart(3, "div", 20);
122
+ i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r26); const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.handleContextMenuOption(2)); });
167
123
  i0.ɵɵtext(4, "Close Others");
168
124
  i0.ɵɵelementEnd();
169
- i0.ɵɵelementStart(5, "div", 29);
170
- 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)); });
125
+ i0.ɵɵelementStart(5, "div", 20);
126
+ i0.ɵɵlistener("click", function NavigationComponent_div_5_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r26); const ctx_r28 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r28.handleContextMenuOption(3)); });
171
127
  i0.ɵɵtext(6, "Close Tabs to the Right");
172
128
  i0.ɵɵelementEnd()();
173
129
  } if (rf & 2) {
@@ -210,8 +166,8 @@ export class NavigationComponent {
210
166
  this.tabs = [];
211
167
  this.closedTabs = []; // should always be empty after using it
212
168
  this.tabQueryParams = {};
213
- this.activeTabIndex = 0;
214
- this.selectedTabIndex = 0;
169
+ // public activeTabIndex: number = 0;
170
+ // public selectedTabIndex: number = 0;
215
171
  this.workSpace = {};
216
172
  this.workSpaceItems = [];
217
173
  this.panelItems = [];
@@ -220,49 +176,18 @@ export class NavigationComponent {
220
176
  this.isMobileScreen = false;
221
177
  this.contextMenuStyle = {};
222
178
  this.contextMenuVisible = false;
223
- this.showLeftButton = false;
224
- this.showRightButton = false;
179
+ this._contextMenuSelectedTabIndex = -1;
225
180
  this._loggedIn = false;
226
181
  this._earlyEvents = [];
227
182
  this.gotFirstNav = false;
228
183
  this._mostRecentURL = '';
229
184
  this.tabs = [];
230
185
  }
231
- onResize(event) {
232
- this.checkTabScrollButtons();
233
- }
234
- checkTabScrollButtons() {
235
- if (this.tabInnerContainer && this.tabInnerContainer.nativeElement && this.tabInnerContainer.nativeElement.parentElement) {
236
- const container = this.tabInnerContainer.nativeElement;
237
- const parent = container.parentElement;
238
- const currentLeft = container.style.left ? parseInt(container.style.left) : 0;
239
- // 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
240
- this.showRightButton = container.clientWidth > parent.clientWidth &&
241
- currentLeft + container.clientWidth > parent.clientWidth;
242
- // Show left button if left position is less than 0, meaning some of the left side of the container is off screen
243
- this.showLeftButton = currentLeft < 0;
244
- }
245
- }
246
- scrollTabHeader(scrollAmount) {
247
- const style = this.tabInnerContainer.nativeElement.style;
248
- if (style) {
249
- const curLeft = style.left ? parseInt(style.left) : 0;
250
- style.left = (curLeft + scrollAmount) + 'px';
251
- this.checkTabScrollButtons(); // can do immediately because the above is direct DOM manipulation so the effect is immediate
252
- }
253
- }
254
- scrollLeft() {
255
- this.scrollTabHeader(150);
256
- }
257
- scrollRight() {
258
- this.scrollTabHeader(-150);
259
- }
260
- onTabContextMenu(event, tab) {
261
- event.preventDefault();
262
- this.selectedTabIndex = tab;
263
- const mouseEvent = event;
264
- const mouseX = mouseEvent.clientX;
265
- const mouseY = mouseEvent.clientY;
186
+ handleTabContextMenu(event) {
187
+ event.mouseEvent.preventDefault();
188
+ this._contextMenuSelectedTabIndex = event.index;
189
+ const mouseX = event.mouseEvent.clientX;
190
+ const mouseY = event.mouseEvent.clientY;
266
191
  this.contextMenuStyle = {
267
192
  top: mouseY + 'px',
268
193
  left: mouseX + 'px'
@@ -280,16 +205,18 @@ export class NavigationComponent {
280
205
  break;
281
206
  case 2:
282
207
  // Close Others
283
- this.closedTabs = this.tabs.filter((tab, id) => id !== this.selectedTabIndex);
284
- this.tabs = [this.tabs[this.selectedTabIndex]];
285
- if (this.activeTabIndex > 1)
286
- this.activeTabIndex = 1;
208
+ // the _contextMenuSelectedTabIndex is the index of the tab that was right-clicked on and it INCLUDES the home tab so we have to adjust it
209
+ // keep just that item
210
+ if (this._contextMenuSelectedTabIndex > 0) {
211
+ this.closedTabs = this.tabs.filter((tab, index) => index !== this._contextMenuSelectedTabIndex - 1);
212
+ this.tabs = [this.tabs[this._contextMenuSelectedTabIndex - 1]];
213
+ }
287
214
  break;
288
215
  case 3:
289
216
  // Close Tabs to the Right
290
- this.activeTabIndex = this.selectedTabIndex + 1;
291
- this.closedTabs = this.closedTabs.concat(this.tabs.slice(this.activeTabIndex));
292
- this.tabs = this.tabs.slice(0, this.selectedTabIndex + 1);
217
+ const currentTabIndex = this._contextMenuSelectedTabIndex - 1; // because the HOME tab is not in the array so we have to offset by 1 here for our data structure
218
+ this.closedTabs = this.tabs.slice(currentTabIndex + 1); // close everything to right
219
+ this.tabs = this.tabs.slice(0, currentTabIndex + 1);
293
220
  break;
294
221
  default:
295
222
  // Handle other options if needed
@@ -303,9 +230,11 @@ export class NavigationComponent {
303
230
  yield this.removeWorkspaceItem(tab, transGroup);
304
231
  }
305
232
  yield transGroup.Submit();
306
- if (this.activeTabIndex > this.tabs.length)
307
- this.activeTabIndex = this.tabs.length - 1;
308
- //this.tabstrip.selectTab(this.activeTabIndex);
233
+ yield this.waitForDomUpdate(); // make sure the DOM is updated before we do anything else so that the tab control knows about the changes from our data structure changes ABOVE
234
+ if (this.activeTabIndex > this.tabs.length) // DO NOT add 1 here because in this case, the array boundary is the max for the tab control
235
+ this.activeTabIndex = this.tabs.length; // don't subtract 1 here because the activeTabIndex is relative to the full set of tabs and the this.tabs array doesn't include the HOME tab
236
+ else
237
+ this.activeTabIndex = this.activeTabIndex; // this is a hack to force the tab control to update the selected tab
309
238
  if (this.activeTabIndex === 0) {
310
239
  // 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
311
240
  let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
@@ -319,9 +248,6 @@ export class NavigationComponent {
319
248
  this.isMobileScreen = window.innerWidth <= 840;
320
249
  }
321
250
  ngAfterViewInit() {
322
- // check tab scroll buttons and bind to resize
323
- this.checkTabScrollButtons();
324
- window.addEventListener('resize', this.checkTabScrollButtons.bind(this));
325
251
  MJGlobal.Instance.GetEventListener(true) // true gets us replay of past events so we can "catch up" as needed
326
252
  .subscribe(event => {
327
253
  this.handleEvent(event, event.args);
@@ -427,9 +353,7 @@ export class NavigationComponent {
427
353
  else {
428
354
  this._mostRecentURL = this.router.url;
429
355
  // see if this matches a drawer item or not
430
- const di = this.drawerItems;
431
- //const item = di.find(i => (<any>i).path.toLowerCase().trim() === url.toLowerCase().trim());
432
- const item = di.find(i => { var _a; return url.toLowerCase().trim().startsWith((_a = i.path) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim()); });
356
+ const item = this.drawerItems.find(i => { var _a; return url.toLowerCase().trim().startsWith((_a = i.path) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim()); });
433
357
  if (item) {
434
358
  this.selectDrawerItem(this.drawerItems.indexOf(item));
435
359
  this.gotFirstNav = true;
@@ -475,29 +399,26 @@ export class NavigationComponent {
475
399
  this.setActiveTabToHome();
476
400
  }
477
401
  setActiveTabToHome() {
478
- this.selectTab(null);
402
+ this.innerSelectTab(null);
479
403
  }
480
- selectTab(tab) {
404
+ innerSelectTab(tab) {
481
405
  // get index from the tabs array
482
406
  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
483
- if (this.activeTabIndex !== index) {
484
- this.activeTabIndex = index;
485
- this.sharedService.InvokeManualResize();
486
- if (index === 0) {
487
- let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
488
- if (this.selectedDrawerItem !== null && this.selectedDrawerItem !== undefined)
489
- url = this.selectedDrawerItem.path;
490
- this.router.navigate([url]);
491
- this.setAppTitle();
492
- this._mostRecentURL = url;
493
- }
494
- else {
495
- const tab = this.tabs[index - 1];
496
- if (tab) {
497
- this.setAppTitle(tab.label);
498
- const data = tab.data;
499
- this.updateBrowserURL(tab, data);
500
- }
407
+ this.sharedService.InvokeManualResize();
408
+ if (index === 0) {
409
+ let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
410
+ if (this.selectedDrawerItem !== null && this.selectedDrawerItem !== undefined)
411
+ url = this.selectedDrawerItem.path;
412
+ this.router.navigate([url]);
413
+ this.setAppTitle();
414
+ this._mostRecentURL = url;
415
+ }
416
+ else {
417
+ const tab = this.tabs[index - 1];
418
+ if (tab) {
419
+ this.setAppTitle(tab.label);
420
+ const data = tab.data;
421
+ this.updateBrowserURL(tab, data);
501
422
  }
502
423
  }
503
424
  }
@@ -549,7 +470,7 @@ export class NavigationComponent {
549
470
  return __awaiter(this, void 0, void 0, function* () {
550
471
  const md = new Metadata();
551
472
  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.
552
- this.workSpaceItems.forEach((item, index) => __awaiter(this, void 0, void 0, function* () {
473
+ for (let item of this.workSpaceItems) {
553
474
  const itemData = item.Configuration ? JSON.parse(item.Configuration) : {};
554
475
  const resourceData = new ResourceData({
555
476
  ID: item.ID,
@@ -566,16 +487,17 @@ export class NavigationComponent {
566
487
  workspaceItem: item, // provide the entity object here so we can modify it later if needed
567
488
  icon: resourceData.ResourceIcon
568
489
  };
569
- this.tabs.push(newTab);
490
+ // now add to data structure
491
+ yield this.internalAddTab(newTab);
570
492
  setTimeout(() => __awaiter(this, void 0, void 0, function* () {
571
493
  // non-blocking, load dynamically
572
494
  newTab.label = yield this.GetWorkspaceItemDisplayName(resourceData);
573
495
  newTab.labelLoading = false;
574
496
  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
575
497
  this.setAppTitle(newTab.label);
576
- this.checkTabScrollButtons();
577
498
  }), 10);
578
- }));
499
+ }
500
+ this.mjTabStrip.SelectedTabIndex = 0;
579
501
  });
580
502
  }
581
503
  setAppTitle(title = '') {
@@ -624,7 +546,8 @@ export class NavigationComponent {
624
546
  const existingTab = this.checkForExistingTab(data);
625
547
  if (existingTab) {
626
548
  const index = this.tabs.indexOf(existingTab);
627
- this.activeTabIndex = index + 1; // add one because the HOME tab is not in the tabs array but it IS part of our tab structure
549
+ // add one because the HOME tab is not in the tabs array but it IS part of our tab structure
550
+ this.activeTabIndex = index + 1;
628
551
  //this.tabstrip.selectTab(this.activeTabIndex);
629
552
  this.scrollIntoView();
630
553
  if (existingTab.label)
@@ -645,7 +568,7 @@ export class NavigationComponent {
645
568
  // 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
646
569
  yield this.SaveSingleWorkspaceItem(newTab);
647
570
  // now add to data structure
648
- this.tabs.push(newTab);
571
+ yield this.internalAddTab(newTab);
649
572
  // select the new tab
650
573
  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
651
574
  //this.tabstrip.selectTab(this.activeTabIndex);
@@ -662,6 +585,20 @@ export class NavigationComponent {
662
585
  }
663
586
  });
664
587
  }
588
+ internalAddTab(newTab) {
589
+ return __awaiter(this, void 0, void 0, function* () {
590
+ // add the tab to the tabs collection
591
+ this.tabs.push(newTab);
592
+ // Manually trigger change detection and wait for DOM updates
593
+ yield this.waitForDomUpdate();
594
+ });
595
+ }
596
+ waitForDomUpdate() {
597
+ return new Promise(resolve => {
598
+ this.cdr.detectChanges(); // Manually trigger change detection
599
+ setTimeout(() => { resolve(); }, 0); // Resolve on the next tick to ensure changes are reflected in the DOM
600
+ });
601
+ }
665
602
  updateBrowserURL(tab, data) {
666
603
  // update the URL to reflect the current tab
667
604
  var _a;
@@ -805,37 +742,46 @@ export class NavigationComponent {
805
742
  tab.contentLoading = bLoading;
806
743
  this.cdr.detectChanges(); // Manually trigger change detection
807
744
  }
808
- closeTab(tab) {
745
+ handleTabClosed(event) {
746
+ return __awaiter(this, void 0, void 0, function* () {
747
+ // get our tab data structure item based on the index that we get in the event
748
+ if (event.index !== null && event.index >= 0 && event.index <= this.tabs.length) {
749
+ const tab = this.tabs[event.index - 1]; // subtract 1 because the event index includes the home tab and our data structure does not
750
+ yield this.closeTab(tab, event.newTabIndex);
751
+ }
752
+ event.done(); // let the tab control know that we're done handling the event
753
+ });
754
+ }
755
+ handleTabSelected(event) {
756
+ if (event.index !== null && event.index >= 0 && event.index <= this.tabs.length) {
757
+ if (event.index > 0) {
758
+ const tab = this.tabs[event.index - 1]; // subtract 1 because the event index includes the home tab and our data structure does not
759
+ this.innerSelectTab(tab);
760
+ }
761
+ else
762
+ this.innerSelectTab(null); // home
763
+ }
764
+ }
765
+ closeTab(tab, newTabIndex) {
809
766
  return __awaiter(this, void 0, void 0, function* () {
810
767
  const tabIndex = this.tabs.indexOf(tab);
811
768
  if (tabIndex >= 0) {
812
769
  yield this.removeWorkspaceItem(this.tabs[tabIndex], null /*no transaction group*/);
770
+ // await this.waitForDomUpdate(); // make sure dom is up to date
813
771
  // now, check to see how many tabs we have left and if we have none, then we need to select the HOME tab
814
772
  if (this.tabs.length > 0) {
815
- if (tabIndex > this.tabs.length) {
816
- // we're closing the last tab, so select the tab to the left of it
817
- 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
773
+ if (newTabIndex === 0) {
774
+ // home tab
775
+ this.innerSelectTab(null); // null param means home tab
818
776
  }
819
777
  else {
820
- // we're closing a tab that is not the last tab, so we need to select the tab to the right of it
821
- 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
822
- }
823
- const i = this.activeTabIndex > 0 ? this.activeTabIndex - 1 : 0;
824
- const tabs = this.tabs;
825
- const tab = tabs[i];
826
- if (tab) {
827
- const data = tab.data;
828
- this.updateBrowserURL(tab, data);
778
+ // not home tab
779
+ const tab = this.tabs[newTabIndex - 1]; // remove 1 because the newTabIndex includes the HOME tab and our data structure does not
780
+ this.updateBrowserURL(tab, tab === null || tab === void 0 ? void 0 : tab.data);
829
781
  }
830
782
  }
831
783
  else {
832
- // the tab that will be selected is the HOME tab o we need to update
833
- this.activeTabIndex = 0;
834
- // 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
835
- let url = this.selectedDrawerItem ? this.selectedDrawerItem.path : '/home';
836
- this.router.navigate([url]);
837
- //this.location.go(url); // update the browser URL if needed
838
- this._mostRecentURL = url;
784
+ this.innerSelectTab(null); // null param means home tab
839
785
  }
840
786
  }
841
787
  });
@@ -897,6 +843,16 @@ export class NavigationComponent {
897
843
  }
898
844
  this.setAppTitle(ev.item.text);
899
845
  }
846
+ get activeTabIndex() {
847
+ if (this.mjTabStrip)
848
+ return this.mjTabStrip.SelectedTabIndex;
849
+ else
850
+ return -1;
851
+ }
852
+ set activeTabIndex(index) {
853
+ if (this.mjTabStrip)
854
+ this.mjTabStrip.SelectedTabIndex = index;
855
+ }
900
856
  getEntityItemFromViewItem(viewItem) {
901
857
  let entityItem = null;
902
858
  for (let item of this.drawerItems) {
@@ -1079,21 +1035,21 @@ NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new
1079
1035
  NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["app-navigation"]], viewQuery: function NavigationComponent_Query(rf, ctx) { if (rf & 1) {
1080
1036
  i0.ɵɵviewQuery(DrawerComponent, 5);
1081
1037
  i0.ɵɵviewQuery(_c0, 5);
1082
- i0.ɵɵviewQuery(_c1, 7, ElementRef);
1083
- i0.ɵɵviewQuery(_c2, 5);
1038
+ i0.ɵɵviewQuery(_c1, 5);
1039
+ i0.ɵɵviewQuery(_c2, 7, ElementRef);
1084
1040
  } if (rf & 2) {
1085
1041
  let _t;
1086
1042
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drawer = _t.first);
1043
+ i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mjTabStrip = _t.first);
1087
1044
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drawerWrapper = _t.first);
1088
1045
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
1089
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabInnerContainer = _t.first);
1090
1046
  } }, hostVars: 2, hostBindings: function NavigationComponent_HostBindings(rf, ctx) { if (rf & 1) {
1091
- 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);
1047
+ i0.ɵɵlistener("resize", function NavigationComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow)("click", function NavigationComponent_click_HostBindingHandler() { return ctx.onClick(); }, false, i0.ɵɵresolveDocument);
1092
1048
  } if (rf & 2) {
1093
1049
  i0.ɵɵclassProp("mobile-screen", ctx.isMobileScreen);
1094
- } }, 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) {
1050
+ } }, 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", "", 3, "TabClosed", "TabSelected", "TabContextMenu"], ["mjTabstrip", ""], [3, "TabCloseable"], [3, "TabCloseable", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], [3, "items"], [3, "icon", 4, "ngIf"], [3, "icon"], [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) {
1095
1051
  i0.ɵɵelementStart(0, "div", 0, 1);
1096
- 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);
1052
+ i0.ɵɵtemplate(2, NavigationComponent_kendo_loader_2_Template, 1, 0, "kendo-loader", 2)(3, NavigationComponent_kendo_drawer_container_3_Template, 13, 9, "kendo-drawer-container", 3);
1097
1053
  i0.ɵɵelement(4, "mj-skip-button", 4);
1098
1054
  i0.ɵɵelementEnd();
1099
1055
  i0.ɵɵtemplate(5, NavigationComponent_div_5_Template, 7, 1, "div", 5);
@@ -1105,10 +1061,10 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
1105
1061
  i0.ɵɵproperty("ngIf", !ctx.loading);
1106
1062
  i0.ɵɵadvance(2);
1107
1063
  i0.ɵɵproperty("ngIf", ctx.contextMenuVisible);
1108
- } }, 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}"] });
1064
+ } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i3.NgStyle, i1.RouterOutlet, i5.LoaderComponent, i6.SVGIconComponent, i7.FillContainer, i8.DrawerComponent, i8.DrawerContainerComponent, i8.DrawerContentComponent, i9.SkipButtonComponent, i10.MJTabStripComponent, i10.MJTabBodyComponent, i10.MJTabComponent, 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: #bb443c;\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 font-size: 12px;\r\n border-radius: 10px;\r\n color: black;\r\n}\r\n.tab-close-button[_ngcontent-%COMP%]:hover {\r\n background-color: lightgray;\r\n}"] });
1109
1065
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponent, [{
1110
1066
  type: Component,
1111
- 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}"] }]
1067
+ 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 <mj-tabstrip #mjTabstrip mjFillContainer (TabClosed)=\"handleTabClosed($event)\" (TabSelected)=\"handleTabSelected($event)\" (TabContextMenu)=\"handleTabContextMenu($event)\">\r\n <mj-tab [TabCloseable]=\"false\">\r\n Home\r\n </mj-tab>\r\n <mj-tab-body>\r\n <router-outlet></router-outlet>\r\n </mj-tab-body>\r\n\r\n <mj-tab *ngFor=\"let tab of tabs;let i = index\" [TabCloseable]=\"true\">\r\n <kendo-svgicon *ngIf=\"tab?.contentLoading\" [icon]=\"sharedService.kendoSVGIcon('clock')\"></kendo-svgicon>\r\n <kendo-svgicon *ngIf=\"!tab?.contentLoading && tab?.icon\" [icon]=\"sharedService.kendoSVGIcon(tab.icon)\"></kendo-svgicon> \r\n {{ tab.labelLoading ? 'Loading...' : tab.label }}\r\n </mj-tab>\r\n <mj-tab-body *ngFor=\"let tab of tabs;let i = index\">\r\n <mj-resource [Data]=\"tab.data\" [isVisible]=\"activeTabIndex - 1 === i\"\r\n (ResourceRecordSaved)=\"SaveSingleWorkspaceItem(tab)\"\r\n (ContentLoadingStarted)=\"setTabContentLoadingStatus(tab, true)\"\r\n (ContentLoadingComplete)=\"setTabContentLoadingStatus(tab, false)\"\r\n ></mj-resource>\r\n </mj-tab-body>\r\n </mj-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: #bb443c;\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 font-size: 12px;\r\n border-radius: 10px;\r\n color: black;\r\n}\r\n.tab-close-button:hover {\r\n background-color: lightgray;\r\n}"] }]
1112
1068
  }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }, { type: i3.Location }, { type: i0.Renderer2 }, { type: i4.Title }, { type: i0.ChangeDetectorRef }], { applicationName: [{
1113
1069
  type: Input
1114
1070
  }], isMobileScreen: [{
@@ -1117,6 +1073,9 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
1117
1073
  }], drawer: [{
1118
1074
  type: ViewChild,
1119
1075
  args: [DrawerComponent, { static: false }]
1076
+ }], mjTabStrip: [{
1077
+ type: ViewChild,
1078
+ args: ['mjTabstrip']
1120
1079
  }], drawerWrapper: [{
1121
1080
  type: ViewChild,
1122
1081
  args: ['drawerWrapper', { static: false }]
@@ -1129,11 +1088,5 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
1129
1088
  }], onClick: [{
1130
1089
  type: HostListener,
1131
1090
  args: ['document:click']
1132
- }], tabInnerContainer: [{
1133
- type: ViewChild,
1134
- args: ['tabInnerContainer']
1135
- }], onResize: [{
1136
- type: HostListener,
1137
- args: ['window:resize', ['$event']]
1138
1091
  }] }); })();
1139
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavigationComponent, { className: "NavigationComponent", filePath: "src\\lib\\navigation\\navigation.component.ts", lineNumber: 30 }); })();
1092
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavigationComponent, { className: "NavigationComponent", filePath: "src\\lib\\navigation\\navigation.component.ts", lineNumber: 31 }); })();