@memberjunction/ng-tabstrip 0.9.2

package/dist/lib/module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./tab-strip/tab-strip.component";
+import * as i2 from "./tab-body/tab-body.component";
+import * as i3 from "./tab/tab.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@memberjunction/ng-container-directives";
+export declare class MJTabStripModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJTabStripModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MJTabStripModule, [typeof i1.MJTabStripComponent, typeof i2.MJTabBodyComponent, typeof i3.MJTabComponent], [typeof i4.CommonModule, typeof i5.ContainerDirectivesModule], [typeof i1.MJTabStripComponent, typeof i2.MJTabBodyComponent, typeof i3.MJTabComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MJTabStripModule>;
+}

package/dist/lib/module.js

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// LOCAL
+import { MJTabStripComponent } from './tab-strip/tab-strip.component';
+import { MJTabBodyComponent } from './tab-body/tab-body.component';
+import { MJTabComponent } from './tab/tab.component';
+import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
+import * as i0 from "@angular/core";
+export class MJTabStripModule {
+}
+MJTabStripModule.ɵfac = function MJTabStripModule_Factory(t) { return new (t || MJTabStripModule)(); };
+MJTabStripModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MJTabStripModule });
+MJTabStripModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        ContainerDirectivesModule] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    MJTabStripComponent,
+                    MJTabBodyComponent,
+                    MJTabComponent
+                ],
+                imports: [
+                    CommonModule,
+                    ContainerDirectivesModule
+                ],
+                exports: [
+                    MJTabStripComponent,
+                    MJTabBodyComponent,
+                    MJTabComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MJTabStripModule, { declarations: [MJTabStripComponent,
+        MJTabBodyComponent,
+        MJTabComponent], imports: [CommonModule,
+        ContainerDirectivesModule], exports: [MJTabStripComponent,
+        MJTabBodyComponent,
+        MJTabComponent] }); })();

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

@@ -0,0 +1,36 @@
+import { MJTabBase } from '../tab.base';
+import { MJTabStripComponent } from '../tab-strip/tab-strip.component';
+import * as i0 from "@angular/core";
+/**
+ * Represents the tab in the header of a given tab strip
+ */
+export declare class MJTabComponent extends MJTabBase {
+    private tabstrip;
+    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.
+     */
+    get TabSelected(): boolean;
+    set TabSelected(value: boolean);
+    /**
+     * Determines if the tab can be closed by a user, or not. Defaults to false.
+     */
+    TabCloseable: boolean;
+    /**
+     * Returns a reference to the tab strip that this tab belongs to.
+     */
+    get TabStrip(): MJTabStripComponent;
+    constructor(tabstrip: MJTabStripComponent);
+    /**
+     * 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.
+     */
+    selectTab(): void;
+    /**
+     * Event handler for when the close button is clicked on the tab. This will fire the BeforeTabClosed event on the TabStrip component, and if it is not cancelled, will then fire the AfterTabClosed event.
+     */
+    closeTab($event: MouseEvent): void;
+    handleContextMenu($event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJTabComponent, [{ host: true; }]>;
+    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

@@ -0,0 +1,85 @@
+import { Component, Input, Host } from '@angular/core';
+import { MJTabBase } from '../tab.base';
+import * as i0 from "@angular/core";
+import * as i1 from "../tab-strip/tab-strip.component";
+import * as i2 from "@angular/common";
+function MJTabComponent_span_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 2);
+    i0.ɵɵlistener("click", function MJTabComponent_span_2_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeTab($event)); });
+    i0.ɵɵtext(1, "\u2716");
+    i0.ɵɵelementEnd();
+} }
+const _c0 = a0 => ({ "single-tab-selected": a0 });
+const _c1 = ["*"];
+/**
+ * Represents the tab in the header of a given tab strip
+ */
+export class MJTabComponent extends MJTabBase {
+    /**
+     * 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.
+     */
+    get TabSelected() {
+        return this._tabSelected;
+    }
+    set TabSelected(value) {
+        this._tabSelected = value;
+    }
+    /**
+     * Returns a reference to the tab strip that this tab belongs to.
+     */
+    get TabStrip() {
+        return this.tabstrip;
+    }
+    constructor(tabstrip) {
+        super();
+        this.tabstrip = tabstrip;
+        this._tabSelected = false;
+        /**
+         * Determines if the tab can be closed by a user, or not. Defaults to false.
+         */
+        this.TabCloseable = false;
+    }
+    /**
+     * 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.
+     */
+    selectTab() {
+        this.tabstrip.SelectedTabIndex = this.index;
+    }
+    /**
+     * Event handler for when the close button is clicked on the tab. This will fire the BeforeTabClosed event on the TabStrip component, and if it is not cancelled, will then fire the AfterTabClosed event.
+     */
+    closeTab($event) {
+        $event.stopPropagation(); // prevent click from going to the tab
+        this.tabstrip.CloseTab(this.index);
+    }
+    handleContextMenu($event) {
+        $event.preventDefault();
+        this.tabstrip.handleTabContextMenu($event, this);
+    }
+}
+MJTabComponent.ɵfac = function MJTabComponent_Factory(t) { return new (t || MJTabComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1)); };
+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);
+        i0.ɵɵlistener("click", function MJTabComponent_Template_div_click_0_listener() { return ctx.selectTab(); })("contextmenu", function MJTabComponent_Template_div_contextmenu_0_listener($event) { return ctx.handleContextMenu($event); });
+        i0.ɵɵprojection(1);
+        i0.ɵɵtemplate(2, MJTabComponent_span_2_Template, 2, 0, "span", 1);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0, ctx.TabSelected));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.TabCloseable);
+    } }, dependencies: [i2.NgClass, i2.NgIf], styles: [".single-tab[_ngcontent-%COMP%] {\r\n    flex: 0 0 auto; \n\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  }"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabComponent, [{
+        type: Component,
+        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: Input
+        }], TabCloseable: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabComponent, { className: "MJTabComponent", filePath: "src\\lib\\tab\\tab.component.ts", lineNumber: 13 }); })();

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

@@ -0,0 +1,10 @@
+import { MJTabBase } from '../tab.base';
+import { MJTabStripComponent } from '../tab-strip/tab-strip.component';
+import * as i0 from "@angular/core";
+export declare class MJTabBodyComponent extends MJTabBase {
+    private tabstrip;
+    TabVisible: boolean;
+    constructor(tabstrip: MJTabStripComponent);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJTabBodyComponent, [{ host: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJTabBodyComponent, "mj-tab-body", never, { "TabVisible": { "alias": "TabVisible"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

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

@@ -0,0 +1,31 @@
+import { Component, Input, Host } from '@angular/core';
+import { MJTabBase } from '../tab.base';
+import * as i0 from "@angular/core";
+import * as i1 from "../tab-strip/tab-strip.component";
+import * as i2 from "@memberjunction/ng-container-directives";
+const _c0 = ["*"];
+export class MJTabBodyComponent extends MJTabBase {
+    constructor(tabstrip) {
+        super();
+        this.tabstrip = tabstrip;
+        this.TabVisible = false;
+    }
+}
+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) {
+        i0.ɵɵprojectionDef();
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵprojection(1);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("hidden", !ctx.TabVisible);
+    } }, dependencies: [i2.FillContainer] });
+(() => { (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>" }]
+    }], () => [{ type: i1.MJTabStripComponent, decorators: [{
+                type: Host
+            }] }], { TabVisible: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabBodyComponent, { className: "MJTabBodyComponent", filePath: "src\\lib\\tab-body\\tab-body.component.ts", lineNumber: 11 }); })();

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

@@ -0,0 +1,84 @@
+import { EventEmitter, QueryList, ElementRef, AfterContentInit, AfterContentChecked, AfterViewInit } from '@angular/core';
+import { MJTabComponent } from '../tab/tab.component';
+import { MJTabBodyComponent } from '../tab-body/tab-body.component';
+import * as i0 from "@angular/core";
+export declare class TabEvent {
+    index: number;
+    tab: MJTabComponent | null;
+    body: MJTabBodyComponent | null;
+}
+export declare class TabCancelableEvent extends TabEvent {
+    cancel: boolean;
+}
+export declare class TabClosedEvent extends TabEvent {
+    /**
+     * This property provides the default calculation for what the new tab index will be and can be overriden by the container component to set a different value.
+     */
+    newTabIndex: number;
+    /**
+     * Whenever the container is done processing, it MUST call this done method to signal that it is done.
+     */
+    done: (error?: any) => {};
+}
+export declare class TabContextMenuEvent extends TabEvent {
+    mouseEvent: MouseEvent;
+}
+export declare class MJTabStripComponent implements AfterContentInit, AfterContentChecked, AfterViewInit {
+    protected _selectedTabIndex: number;
+    /**
+     * The index of the selected tab. You can get/set this value and it will change the displayed tab.
+     */
+    get SelectedTabIndex(): number;
+    set SelectedTabIndex(index: number);
+    protected innerRefreshTabVisibility(index: number): void;
+    /**
+     * This event is fired before a tab is selected. If you set cancel to true, the tab will not be selected.
+     */
+    BeforeTabSelected: EventEmitter<TabCancelableEvent>;
+    /**
+     * This event is fired when a tab is selected.
+     */
+    TabSelected: EventEmitter<TabEvent>;
+    /**
+     * This event is fired before a tab is closed. If you set cancel to true, the tab will not be closed.
+     */
+    BeforeTabClosed: EventEmitter<TabCancelableEvent>;
+    /**
+     * This event is fired after a tab is closed.
+     */
+    TabClosed: EventEmitter<TabClosedEvent>;
+    /**
+     * This event is fired when a tab is right-clicked and the context menu event from the tab header fires.
+     */
+    TabContextMenu: EventEmitter<TabContextMenuEvent>;
+    tabs: QueryList<MJTabComponent>;
+    tabBodies: QueryList<MJTabBodyComponent>;
+    private _viewInitialized;
+    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
+    protected syncTabIndexes(): void;
+    /**
+     * Returns a read-only (copy) of the tabs in this tab strip.
+     */
+    get Tabs(): MJTabComponent[];
+    /**
+     * Returns a read-only (copy) of the tab bodies in this tab strip.
+     */
+    get TabBodies(): MJTabBodyComponent[];
+    /**
+     * Method will close the specified tab number. It is automatically called by a tab that has TabCloseable set to true, if the user clicks the close button, and can be called programatically as well.
+     */
+    CloseTab(tabIndex: number): Promise<void>;
+    handleTabContextMenu($event: MouseEvent, tab: MJTabComponent): void;
+    tabInnerContainer: ElementRef;
+    showLeftButton: boolean;
+    showRightButton: boolean;
+    onResize(event: any): void;
+    checkTabScrollButtons(): void;
+    scrollTabHeader(scrollAmount: number): void;
+    scrollLeft(): void;
+    scrollRight(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJTabStripComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJTabStripComponent, "mj-tabstrip", never, { "SelectedTabIndex": { "alias": "SelectedTabIndex"; "required": false; }; }, { "BeforeTabSelected": "BeforeTabSelected"; "TabSelected": "TabSelected"; "BeforeTabClosed": "BeforeTabClosed"; "TabClosed": "TabClosed"; "TabContextMenu": "TabContextMenu"; }, ["tabs", "tabBodies"], ["mj-tab", "mj-tab-body"], false, never>;
+}

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

@@ -0,0 +1,294 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, Input, EventEmitter, Output, ContentChildren, ViewChild, HostListener } from '@angular/core';
+import { MJTabComponent } from '../tab/tab.component';
+import { MJTabBodyComponent } from '../tab-body/tab-body.component';
+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) {
+    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.ɵɵelementEnd();
+} }
+function MJTabStripComponent_button_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.ɵɵelementEnd();
+} }
+const _c1 = [[["mj-tab"]], [["mj-tab-body"]]];
+const _c2 = ["mj-tab", "mj-tab-body"];
+export class TabEvent {
+    constructor() {
+        this.tab = null;
+        this.body = null;
+    }
+}
+export class TabCancelableEvent extends TabEvent {
+    constructor() {
+        super(...arguments);
+        this.cancel = false;
+    }
+}
+export class TabClosedEvent extends TabEvent {
+}
+export class TabContextMenuEvent extends TabEvent {
+}
+export class MJTabStripComponent {
+    constructor() {
+        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.
+         */
+        this.BeforeTabSelected = new EventEmitter();
+        /**
+         * This event is fired when a tab is selected.
+         */
+        this.TabSelected = new EventEmitter();
+        /**
+         * This event is fired before a tab is closed. If you set cancel to true, the tab will not be closed.
+         */
+        this.BeforeTabClosed = new EventEmitter();
+        /**
+         * This event is fired after a tab is closed.
+         */
+        this.TabClosed = new EventEmitter(true);
+        /**
+         * This event is fired when a tab is right-clicked and the context menu event from the tab header fires.
+         */
+        this.TabContextMenu = new EventEmitter();
+        this._viewInitialized = false;
+        this.showLeftButton = false;
+        this.showRightButton = false;
+    }
+    /**
+     * The index of the selected tab. You can get/set this value and it will change the displayed tab.
+     */
+    get SelectedTabIndex() {
+        return this._selectedTabIndex;
+    }
+    set SelectedTabIndex(index) {
+        // check to make sure that the new index is different from the current index and only do the work here if it is different
+        if (index !== this._selectedTabIndex) {
+            const props = {
+                index: index,
+                tab: index !== null && this.tabs ? this.tabs.toArray()[index] : null,
+                body: index !== null && this.tabBodies ? this.tabBodies.toArray()[index] : null,
+                cancel: false
+            };
+            this.BeforeTabSelected.emit(props);
+            if (!props.cancel) {
+                this._selectedTabIndex = index;
+                this.innerRefreshTabVisibility(index);
+                const afterProps = {
+                    index: index,
+                    tab: props.tab,
+                    body: props.body
+                };
+                this.TabSelected.emit(afterProps);
+            }
+        }
+        else {
+            // always do this even if we're not firing event since we're already on the right tab
+            this.innerRefreshTabVisibility(index);
+        }
+    }
+    innerRefreshTabVisibility(index) {
+        var _a, _b;
+        // 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);
+    }
+    ngAfterViewInit() {
+        this._viewInitialized = true;
+        this.syncTabIndexes();
+    }
+    ngAfterContentInit() {
+        this.syncTabIndexes();
+    }
+    ngAfterContentChecked() {
+        this.syncTabIndexes();
+    }
+    syncTabIndexes() {
+        if (!this._viewInitialized)
+            return; // don't do anything until the view is initialized  
+        // Automatically assign indices to tabs and tab bodies
+        this.tabs.forEach((tab, index) => tab.index = index);
+        this.tabBodies.forEach((body, index) => body.index = index);
+        if (this.SelectedTabIndex === null && this.tabs.length > 0) {
+            this.SelectedTabIndex = 0;
+        }
+        else if (this.tabs.length === 0)
+            this.SelectedTabIndex = -1;
+    }
+    /**
+     * Returns a read-only (copy) of the tabs in this tab strip.
+     */
+    get Tabs() {
+        return this.tabs.toArray();
+    }
+    /**
+     * Returns a read-only (copy) of the tab bodies in this tab strip.
+     */
+    get TabBodies() {
+        return this.tabBodies.toArray();
+    }
+    /**
+     * Method will close the specified tab number. It is automatically called by a tab that has TabCloseable set to true, if the user clicks the close button, and can be called programatically as well.
+     */
+    CloseTab(tabIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (tabIndex >= 0 && tabIndex < this.tabs.length) {
+                // figure out what the new tab index will be so we can share with our container component
+                let newTabIndex;
+                if (this.tabs.length === 1) {
+                    // deleting the only tab we have, shouldn't happen but if so, set to -1
+                    newTabIndex = -1;
+                }
+                else if (this.SelectedTabIndex >= this.tabs.length - 1) {
+                    // we are ABOUT to delete the last tab, so select what will be the new last tab
+                    newTabIndex = this.tabs.length - 2; // substract 2 becuase subtracting 1 would be the last tab, but we are about to delete it
+                }
+                else {
+                    // deleting a tab that is not the last one, so we don't need to do anything special, just set the index to what it was before
+                    newTabIndex = this.SelectedTabIndex;
+                }
+                const props = {
+                    index: tabIndex,
+                    tab: this.tabs.toArray()[tabIndex],
+                    body: this.tabBodies.toArray()[tabIndex],
+                    cancel: false,
+                };
+                this.BeforeTabClosed.emit(props);
+                if (!props.cancel) {
+                    // Convert callback to a promise
+                    const waitForCompletion = new Promise((resolve, reject) => {
+                        props.done = (error) => {
+                            if (error) {
+                                reject(error);
+                            }
+                            else {
+                                resolve(true);
+                            }
+                        };
+                    });
+                    props.newTabIndex = newTabIndex;
+                    // fire off the event to the container component
+                    this.TabClosed.emit(props);
+                    // wait for callback to occur from the event handler
+                    yield waitForCompletion;
+                    // finally, set the tab index to the props.newTabIndex value which allows the container to override our default calculation for new tab index
+                    this.SelectedTabIndex = props.newTabIndex;
+                }
+            }
+            else
+                throw new Error("Invalid tab index: " + tabIndex);
+        });
+    }
+    handleTabContextMenu($event, tab) {
+        this.TabContextMenu.emit({ index: tab.index, tab: tab, body: this.tabBodies.toArray()[tab.index], mouseEvent: $event });
+    }
+    onResize(event) {
+        this.checkTabScrollButtons();
+    }
+    checkTabScrollButtons() {
+        if (this.tabInnerContainer && this.tabInnerContainer.nativeElement && this.tabInnerContainer.nativeElement.parentElement) {
+            const container = this.tabInnerContainer.nativeElement;
+            const parent = container.parentElement;
+            const currentLeft = container.style.left ? parseInt(container.style.left) : 0;
+            // show the right button if the container is wider than the parent AND the left position(which is zero or negative) + the container width is greater than the parent width
+            this.showRightButton = container.clientWidth > parent.clientWidth &&
+                currentLeft + container.clientWidth > parent.clientWidth;
+            // Show left button if left position is less than 0, meaning some of the left side of the container is off screen
+            this.showLeftButton = currentLeft < 0;
+        }
+    }
+    scrollTabHeader(scrollAmount) {
+        const style = this.tabInnerContainer.nativeElement.style;
+        if (style) {
+            const curLeft = style.left ? parseInt(style.left) : 0;
+            style.left = (curLeft + scrollAmount) + 'px';
+            this.checkTabScrollButtons(); // can do immediately because the above is direct DOM manipulation so the effect is immediate
+        }
+    }
+    scrollLeft() {
+        this.scrollTabHeader(150);
+    }
+    scrollRight() {
+        this.scrollTabHeader(-150);
+    }
+}
+MJTabStripComponent.ɵfac = function MJTabStripComponent_Factory(t) { return new (t || MJTabStripComponent)(); };
+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);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabBodies = _t);
+    } }, viewQuery: function MJTabStripComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        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) {
+        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.ɵɵelementEnd();
+        i0.ɵɵelementStart(7, "div", 6);
+        i0.ɵɵprojection(8, 1);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(2);
+        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}"] });
+(() => { (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} "] }]
+    }], null, { SelectedTabIndex: [{
+            type: Input
+        }], BeforeTabSelected: [{
+            type: Output
+        }], TabSelected: [{
+            type: Output
+        }], BeforeTabClosed: [{
+            type: Output
+        }], TabClosed: [{
+            type: Output
+        }], TabContextMenu: [{
+            type: Output
+        }], tabs: [{
+            type: ContentChildren,
+            args: [MJTabComponent]
+        }], tabBodies: [{
+            type: ContentChildren,
+            args: [MJTabBodyComponent]
+        }], tabInnerContainer: [{
+            type: ViewChild,
+            args: ['tabInnerContainer']
+        }], onResize: [{
+            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 }); })();

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

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class TabStripComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabStripComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripComponent, "mj-tabstrip", never, {}, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class TabStripComponent {
+}
+TabStripComponent.ɵfac = function TabStripComponent_Factory(t) { return new (t || TabStripComponent)(); };
+TabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabStripComponent, selectors: [["mj-tabstrip"]], decls: 0, vars: 0, template: function TabStripComponent_Template(rf, ctx) { } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabStripComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-tabstrip', template: "" }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabStripComponent, { className: "TabStripComponent", filePath: "src\\lib\\tab-strip.component.ts", lineNumber: 9 }); })();

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

@@ -0,0 +1,3 @@
+export declare class MJTabBase {
+    index: number;
+}

package/dist/lib/tab.base.js

@@ -0,0 +1,2 @@
+export class MJTabBase {
+}

package/dist/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/tab-strip/tab-strip.component';
+export * from './lib/tab-body/tab-body.component';
+export * from './lib/tab/tab.component';
+export * from './lib/tab.base';
+export * from './lib/module';

package/dist/public-api.js

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface
+ */
+export * from './lib/tab-strip/tab-strip.component';
+export * from './lib/tab-body/tab-body.component';
+export * from './lib/tab/tab.component';
+export * from './lib/tab.base';
+export * from './lib/module';

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@memberjunction/ng-tabstrip",
+  "version": "0.9.2",
+  "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",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "ngc"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@angular/compiler": "~17.2.2",
+    "@angular/compiler-cli": "~17.2.2"
+  },
+  "peerDependencies": {
+    "@angular/common": "~17.2.2",
+    "@angular/core": "~17.2.2"
+  },
+  "dependencies": {
+    "@memberjunction/ng-container-directives": "^0.9.147",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}