@memberjunction/ng-tabstrip 0.9.3 → 0.9.5

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-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.js

@@ -10,6 +10,7 @@ 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";
@@ -21,11 +22,10 @@ function MJTabStripComponent_button_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, "\u21E6");
     i0.ɵɵelementEnd();
 } }
-function MJTabStripComponent_button_6_Template(rf, ctx) { if (rf & 1) {
+function MJTabStripComponent_span_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, "span", 8);
+    i0.ɵɵlistener("click", function MJTabStripComponent_span_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.scrollRight()); });
     i0.ɵɵelementEnd();
 } }
 const _c1 = [[["mj-tab"]], [["mj-tab-body"]]];
@@ -110,16 +110,20 @@ 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);
+        // also ask for a resize now
+        SharedService.Instance.InvokeManualResize();
     }
     ngAfterViewInit() {
         this._viewInitialized = true;
         this.syncTabIndexes();
+        this.checkTabScrollButtons();
     }
     ngAfterContentInit() {
         this.syncTabIndexes();
     }
     ngAfterContentChecked() {
         this.syncTabIndexes();
+        this.checkTabScrollButtons();
     }
     syncTabIndexes() {
         if (!this._viewInitialized)
@@ -245,14 +249,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"], ["kendoButton", "", "class", "tab-scroll-button-left", 3, "click", 4, "ngIf"], [1, "tab-header-inner"], ["tabInnerContainer", ""], ["class", "tab-scroll-button-right fa-regular fa-caret-right", 3, "click", 4, "ngIf"], ["mjFillContainer", "", 1, "tab-bodies"], ["kendoButton", "", 1, "tab-scroll-button-left", 3, "click"], [1, "tab-scroll-button-right", "fa-regular", "fa-caret-right", 3, "click"]], 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.ɵɵ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_span_6_Template, 1, 0, "span", 5);
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(7, "div", 6);
         i0.ɵɵprojection(8, 1);
@@ -262,10 +266,10 @@ 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}\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}"] });
 (() => { (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} "] }]
+        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      <span *ngIf=\"showRightButton\" class=\"tab-scroll-button-right fa-regular fa-caret-right\" (click)=\"scrollRight()\"></span>\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}\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 "] }]
     }], null, { SelectedTabIndex: [{
             type: Input
         }], BeforeTabSelected: [{
@@ -291,4 +295,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.3",
+  "version": "0.9.5",
   "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.49",
     "tslib": "^2.3.0"
   },
   "sideEffects": false