@memberjunction/ng-tabstrip 0.9.4 → 0.9.9

package/dist/lib/module.js

@@ -22,7 +22,7 @@ MJTabStripModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonM
                 ],
                 imports: [
                     CommonModule,
-                    ContainerDirectivesModule
+                    ContainerDirectivesModule,
                 ],
                 exports: [
                     MJTabStripComponent,

package/dist/lib/tab/tab.component.d.ts

@@ -1,3 +1,4 @@
+import { ChangeDetectorRef } from '@angular/core';
 import { MJTabBase } from '../tab.base';
 import { MJTabStripComponent } from '../tab-strip/tab-strip.component';
 import * as i0 from "@angular/core";
@@ -6,6 +7,7 @@ import * as i0 from "@angular/core";
  */
 export declare class MJTabComponent extends MJTabBase {
     private tabstrip;
+    private cdr;
     private _tabSelected;
     /**
      * Determines if the tab is currently selected or not. This is set by the TabStrip component automatically when the SelectedTabIndex is set, do not set this directly.
@@ -20,7 +22,7 @@ export declare class MJTabComponent extends MJTabBase {
      * Returns a reference to the tab strip that this tab belongs to.
      */
     get TabStrip(): MJTabStripComponent;
-    constructor(tabstrip: MJTabStripComponent);
+    constructor(tabstrip: MJTabStripComponent, cdr: ChangeDetectorRef);
     /**
      * Event handler for when this tab is clicked to select it, generally not a great idea to call this directly, but it is possible to call directly to simulate a click.
      * The preferred approach is to set the SelectedTabIndex property on the TabStrip component directly.
@@ -31,6 +33,6 @@ export declare class MJTabComponent extends MJTabBase {
      */
     closeTab($event: MouseEvent): void;
     handleContextMenu($event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MJTabComponent, [{ host: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJTabComponent, [{ host: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MJTabComponent, "mj-tab", never, { "TabSelected": { "alias": "TabSelected"; "required": false; }; "TabCloseable": { "alias": "TabCloseable"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/dist/lib/tab/tab.component.js

@@ -24,6 +24,7 @@ export class MJTabComponent extends MJTabBase {
     }
     set TabSelected(value) {
         this._tabSelected = value;
+        this.cdr.detectChanges(); // Manually trigger change detection to update the view
     }
     /**
      * Returns a reference to the tab strip that this tab belongs to.
@@ -31,9 +32,10 @@ export class MJTabComponent extends MJTabBase {
     get TabStrip() {
         return this.tabstrip;
     }
-    constructor(tabstrip) {
+    constructor(tabstrip, cdr) {
         super();
         this.tabstrip = tabstrip;
+        this.cdr = cdr;
         this._tabSelected = false;
         /**
          * Determines if the tab can be closed by a user, or not. Defaults to false.
@@ -59,7 +61,7 @@ export class MJTabComponent extends MJTabBase {
         this.tabstrip.handleTabContextMenu($event, this);
     }
 }
-MJTabComponent.ɵfac = function MJTabComponent_Factory(t) { return new (t || MJTabComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1)); };
+MJTabComponent.ɵfac = function MJTabComponent_Factory(t) { return new (t || MJTabComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 MJTabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabComponent, selectors: [["mj-tab"]], inputs: { TabSelected: "TabSelected", TabCloseable: "TabCloseable" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 3, vars: 4, consts: [[1, "single-tab", 3, "ngClass", "click", "contextmenu"], ["class", "tab-close-button", 3, "click", 4, "ngIf"], [1, "tab-close-button", 3, "click"]], template: function MJTabComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
@@ -77,7 +79,7 @@ MJTabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabCompone
         args: [{ selector: 'mj-tab', template: "<div class=\"single-tab\" [ngClass]=\"{'single-tab-selected': TabSelected}\" (click)=\"selectTab()\" (contextmenu)=\"handleContextMenu($event)\">\r\n    <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\r\n    <span *ngIf=\"TabCloseable\" class=\"tab-close-button\" (click)=\"closeTab($event)\" >\u2716</span>\r\n</div>", styles: ["\r\n  .single-tab {\r\n    flex: 0 0 auto; /* Prevent tabs from shrinking */\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  }\r\n "] }]
     }], () => [{ type: i1.MJTabStripComponent, decorators: [{
                 type: Host
-            }] }], { TabSelected: [{
+            }] }, { type: i0.ChangeDetectorRef }], { TabSelected: [{
             type: Input
         }], TabCloseable: [{
             type: Input

package/dist/lib/tab-body/tab-body.component.js

@@ -12,17 +12,17 @@ export class MJTabBodyComponent extends MJTabBase {
     }
 }
 MJTabBodyComponent.ɵfac = function MJTabBodyComponent_Factory(t) { return new (t || MJTabBodyComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1)); };
-MJTabBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabBodyComponent, selectors: [["mj-tab-body"]], inputs: { TabVisible: "TabVisible" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 2, vars: 1, consts: [["mjFillContainer", "", 3, "hidden"]], template: function MJTabBodyComponent_Template(rf, ctx) { if (rf & 1) {
+MJTabBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabBodyComponent, selectors: [["mj-tab-body"]], inputs: { TabVisible: "TabVisible" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 2, vars: 1, consts: [["mjFillContainer", "", 1, "tab-body", 3, "hidden"]], template: function MJTabBodyComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵprojection(1);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("hidden", !ctx.TabVisible);
-    } }, dependencies: [i2.FillContainer] });
+    } }, dependencies: [i2.FillContainer], styles: [".tab-body[_ngcontent-%COMP%] {\r\n    border-top: 0;\r\n    background-color: #F5F6FA;    \r\n    width: 100%;\r\n    height: 200px;\r\n    display: block;\r\n    overflow: auto;\r\n  }"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabBodyComponent, [{
         type: Component,
-        args: [{ selector: 'mj-tab-body', template: "<div [hidden]=\"!TabVisible\" mjFillContainer>\r\n    <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\r\n</div>" }]
+        args: [{ selector: 'mj-tab-body', template: "<div class=\"tab-body\" [hidden]=\"!TabVisible\" mjFillContainer>\r\n    <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\r\n</div>", styles: [" \r\n\r\n.tab-body {\r\n    border-top: 0;\r\n    background-color: #F5F6FA;    \r\n    width: 100%;\r\n    height: 200px;\r\n    display: block;\r\n    overflow: auto;\r\n  } "] }]
     }], () => [{ type: i1.MJTabStripComponent, decorators: [{
                 type: Host
             }] }], { TabVisible: [{

package/dist/lib/tab-strip/tab-strip.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, QueryList, ElementRef, AfterContentInit, AfterContentChecked, AfterViewInit } from '@angular/core';
+import { EventEmitter, QueryList, ElementRef, AfterContentInit, AfterContentChecked, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { MJTabComponent } from '../tab/tab.component';
 import { MJTabBodyComponent } from '../tab-body/tab-body.component';
 import * as i0 from "@angular/core";
@@ -24,7 +24,9 @@ export declare class TabContextMenuEvent extends TabEvent {
     mouseEvent: MouseEvent;
 }
 export declare class MJTabStripComponent implements AfterContentInit, AfterContentChecked, AfterViewInit {
+    private cdr;
     protected _selectedTabIndex: number;
+    constructor(cdr: ChangeDetectorRef);
     /**
      * The index of the selected tab. You can get/set this value and it will change the displayed tab.
      */

package/dist/lib/tab-strip/tab-strip.component.js

@@ -10,22 +10,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Component, Input, EventEmitter, Output, ContentChildren, ViewChild, HostListener } from '@angular/core';
 import { MJTabComponent } from '../tab/tab.component';
 import { MJTabBodyComponent } from '../tab-body/tab-body.component';
+import { SharedService } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@memberjunction/ng-container-directives";
 const _c0 = ["tabInnerContainer"];
-function MJTabStripComponent_button_2_Template(rf, ctx) { if (rf & 1) {
+function MJTabStripComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 7);
-    i0.ɵɵlistener("click", function MJTabStripComponent_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.scrollLeft()); });
-    i0.ɵɵtext(1, "\u21E6");
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵlistener("click", function MJTabStripComponent_div_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.scrollLeft()); });
+    i0.ɵɵelement(1, "span", 8);
     i0.ɵɵelementEnd();
 } }
-function MJTabStripComponent_button_6_Template(rf, ctx) { if (rf & 1) {
+function MJTabStripComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 8);
-    i0.ɵɵlistener("click", function MJTabStripComponent_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.scrollRight()); });
-    i0.ɵɵtext(1, "\u21E8");
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵlistener("click", function MJTabStripComponent_div_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.scrollRight()); });
+    i0.ɵɵelement(1, "span", 10);
     i0.ɵɵelementEnd();
 } }
 const _c1 = [[["mj-tab"]], [["mj-tab-body"]]];
@@ -47,7 +48,8 @@ export class TabClosedEvent extends TabEvent {
 export class TabContextMenuEvent extends TabEvent {
 }
 export class MJTabStripComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this._selectedTabIndex = -1; // default to negative 1 so any valid value of 0+ will invoke a state change internally later
         /**
          * This event is fired before a tab is selected. If you set cancel to true, the tab will not be selected.
@@ -110,9 +112,14 @@ export class MJTabStripComponent {
         // now, we have to tell each of our tabs they have been selected or not, and also to tell the bodies if they are visible or not
         (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, i) => tab.TabSelected = i === index);
         (_b = this.tabBodies) === null || _b === void 0 ? void 0 : _b.forEach((body, i) => body.TabVisible = i === index);
+        // let angular now it needs to update its change detection
+        this.cdr.detectChanges();
+        // also ask for a resize now
+        SharedService.Instance.InvokeManualResize();
     }
     ngAfterViewInit() {
         this._viewInitialized = true;
+        this.SelectedTabIndex = this.SelectedTabIndex; // force a refresh of the tab visibility
         this.syncTabIndexes();
         this.checkTabScrollButtons();
     }
@@ -232,7 +239,7 @@ export class MJTabStripComponent {
         this.scrollTabHeader(-150);
     }
 }
-MJTabStripComponent.ɵfac = function MJTabStripComponent_Factory(t) { return new (t || MJTabStripComponent)(); };
+MJTabStripComponent.ɵfac = function MJTabStripComponent_Factory(t) { return new (t || MJTabStripComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabStripComponent, selectors: [["mj-tabstrip"]], contentQueries: function MJTabStripComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
         i0.ɵɵcontentQuery(dirIndex, MJTabComponent, 4);
         i0.ɵɵcontentQuery(dirIndex, MJTabBodyComponent, 4);
@@ -247,14 +254,14 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabInnerContainer = _t.first);
     } }, hostBindings: function MJTabStripComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("resize", function MJTabStripComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow);
-    } }, inputs: { SelectedTabIndex: "SelectedTabIndex" }, outputs: { BeforeTabSelected: "BeforeTabSelected", TabSelected: "TabSelected", BeforeTabClosed: "BeforeTabClosed", TabClosed: "TabClosed", TabContextMenu: "TabContextMenu" }, ngContentSelectors: _c2, decls: 9, vars: 2, consts: [["mjFillContainer", "", 1, "tabstrip-container"], [1, "tab-header-outer"], ["kendoButton", "", "class", "tab-scroll-button-left", 3, "click", 4, "ngIf"], [1, "tab-header-inner"], ["tabInnerContainer", ""], ["kendoButton", "", "class", "tab-scroll-button-right", 3, "click", 4, "ngIf"], ["mjFillContainer", "", 1, "tab-body"], ["kendoButton", "", 1, "tab-scroll-button-left", 3, "click"], ["kendoButton", "", 1, "tab-scroll-button-right", 3, "click"]], template: function MJTabStripComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { SelectedTabIndex: "SelectedTabIndex" }, outputs: { BeforeTabSelected: "BeforeTabSelected", TabSelected: "TabSelected", BeforeTabClosed: "BeforeTabClosed", TabClosed: "TabClosed", TabContextMenu: "TabContextMenu" }, ngContentSelectors: _c2, decls: 9, vars: 2, consts: [["mjFillContainer", "", 1, "tabstrip-container"], [1, "tab-header-outer"], ["class", "tab-scroll-button tab-scroll-button-left", 3, "click", 4, "ngIf"], [1, "tab-header-inner"], ["tabInnerContainer", ""], ["class", "tab-scroll-button tab-scroll-button-right", 3, "click", 4, "ngIf"], ["mjFillContainer", "", 1, "tab-bodies"], [1, "tab-scroll-button", "tab-scroll-button-left", 3, "click"], [1, "fa-solid", "fa-caret-left"], [1, "tab-scroll-button", "tab-scroll-button-right", 3, "click"], [1, "fa-solid", "fa-caret-right"]], template: function MJTabStripComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c1);
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-        i0.ɵɵtemplate(2, MJTabStripComponent_button_2_Template, 2, 0, "button", 2);
+        i0.ɵɵtemplate(2, MJTabStripComponent_div_2_Template, 2, 0, "div", 2);
         i0.ɵɵelementStart(3, "div", 3, 4);
         i0.ɵɵprojection(5);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, MJTabStripComponent_button_6_Template, 2, 0, "button", 5);
+        i0.ɵɵtemplate(6, MJTabStripComponent_div_6_Template, 2, 0, "div", 5);
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(7, "div", 6);
         i0.ɵɵprojection(8, 1);
@@ -264,11 +271,11 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
         i0.ɵɵproperty("ngIf", ctx.showLeftButton);
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("ngIf", ctx.showRightButton);
-    } }, dependencies: [i1.NgIf, i2.FillContainer], styles: [".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\r\n.tab-body[_ngcontent-%COMP%] {\r\n  border-top: 0;\r\n  background-color: #F5F6FA;    \r\n  width: 100%;\r\n  height: 200px;\r\n  display: block;\r\n}"] });
+    } }, dependencies: [i1.NgIf, i2.FillContainer], styles: [".tabstrip-container[_ngcontent-%COMP%] {\r\n  overflow: hidden;\r\n  font-size: 14px; \n\r\n}\r\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.tab-scroll-button[_ngcontent-%COMP%] {\r\n  padding: 8px 10px 10px 8px;\r\n  cursor: pointer;\r\n  border-radius: 6px;\r\n  background-color: lightblue;\r\n}\r\n.tab-scroll-button[_ngcontent-%COMP%]:hover {\r\n  background-color: pink;\r\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripComponent, [{
         type: Component,
-        args: [{ selector: 'mj-tabstrip', template: "<!-- mj-tabstrip.component.html -->\r\n<div class=\"tabstrip-container\" mjFillContainer>\r\n    <!-- Tab Headers -->\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        <ng-content select=\"mj-tab\"></ng-content> <!-- Where <mj-tab> components are projected -->\r\n      </div>\r\n      <button kendoButton *ngIf=\"showRightButton\" class=\"tab-scroll-button-right\" (click)=\"scrollRight()\">\u21E8</button>\r\n    </div>\r\n    <!-- Tab Content -->\r\n    <div class=\"tab-body\" mjFillContainer>\r\n      <ng-content select=\"mj-tab-body\"></ng-content> <!-- Where <mj-tab-body> components are projected -->\r\n    </div>\r\n</div>", styles: [".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\r\n.tab-body {\r\n  border-top: 0;\r\n  background-color: #F5F6FA;    \r\n  width: 100%;\r\n  height: 200px;\r\n  display: block;\r\n} "] }]
-    }], null, { SelectedTabIndex: [{
+        args: [{ selector: 'mj-tabstrip', template: "<!-- mj-tabstrip.component.html -->\r\n<div class=\"tabstrip-container\" mjFillContainer>\r\n    <!-- Tab Headers -->\r\n    <div class=\"tab-header-outer\">\r\n      <div *ngIf=\"showLeftButton\" class=\"tab-scroll-button tab-scroll-button-left\" (click)=\"scrollLeft()\">\r\n        <span class=\"fa-solid fa-caret-left\"></span>\r\n      </div>\r\n      <div class=\"tab-header-inner\" #tabInnerContainer>\r\n        <ng-content select=\"mj-tab\"></ng-content> <!-- Where <mj-tab> components are projected -->\r\n      </div>\r\n      <div *ngIf=\"showRightButton\" class=\"tab-scroll-button tab-scroll-button-right\" (click)=\"scrollRight()\">\r\n        <span class=\"fa-solid fa-caret-right\"></span>\r\n      </div>\r\n    </div>\r\n    <!-- Tab Content -->\r\n    <div class=\"tab-bodies\" mjFillContainer>\r\n      <ng-content select=\"mj-tab-body\"></ng-content> <!-- Where <mj-tab-body> components are projected -->\r\n    </div>\r\n</div>", styles: [".tabstrip-container {\r\n  overflow: hidden;\r\n  font-size: 14px; /*default font size*/\r\n}\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.tab-scroll-button {\r\n  padding: 8px 10px 10px 8px;\r\n  cursor: pointer;\r\n  border-radius: 6px;\r\n  background-color: lightblue;\r\n}\r\n.tab-scroll-button:hover {\r\n  background-color: pink;\r\n}\r\n\r\n "] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { SelectedTabIndex: [{
             type: Input
         }], BeforeTabSelected: [{
             type: Output
@@ -293,4 +300,4 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
             type: HostListener,
             args: ['window:resize', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabStripComponent, { className: "MJTabStripComponent", filePath: "src\\lib\\tab-strip\\tab-strip.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabStripComponent, { className: "MJTabStripComponent", filePath: "src\\lib\\tab-strip\\tab-strip.component.ts", lineNumber: 34 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-tabstrip",
-  "version": "0.9.4",
+  "version": "0.9.9",
   "description": "MemberJunction: Very simple tab strip component used in the MJ Explorer app and reusable anywhere else in an Angular project.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@memberjunction/ng-container-directives": "^0.9.148",
+    "@memberjunction/ng-shared": "^0.9.51",
     "tslib": "^2.3.0"
   },
   "sideEffects": false