@memberjunction/ng-tabstrip 1.4.0 → 1.4.1

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { MJTabBase } from '../tab.base';
 import { MJTabStripComponent } from '../tab-strip/tab-strip.component';
 import * as i0 from "@angular/core";
@@ -8,12 +8,28 @@ import * as i0 from "@angular/core";
 export declare class MJTabComponent extends MJTabBase {
     private tabstrip;
     private cdr;
+    elementRef: ElementRef;
     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);
+    private _visible;
+    get Visible(): boolean;
+    set Visible(value: boolean);
+    private _name;
+    get Name(): string;
+    set Name(value: string);
+    private _id;
+    get ID(): any;
+    set ID(value: any);
+    private _props;
+    /**
+     * A property bag that can be used to store any additional properties that you want to associate with this tab.
+     */
+    get Props(): any;
+    set Props(value: any);
     /**
      * Determines if the tab can be closed by a user, or not. Defaults to false.
      */
@@ -22,7 +38,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, cdr: ChangeDetectorRef);
+    constructor(tabstrip: MJTabStripComponent, cdr: ChangeDetectorRef, elementRef: ElementRef);
     /**
      * 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.
@@ -33,6 +49,6 @@ export declare class MJTabComponent extends MJTabBase {
      */
     closeTab($event: MouseEvent): void;
     handleContextMenu($event: MouseEvent): void;
-    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>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJTabComponent, [{ host: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJTabComponent, "mj-tab", never, { "TabSelected": { "alias": "TabSelected"; "required": false; }; "Visible": { "alias": "Visible"; "required": false; }; "Name": { "alias": "Name"; "required": false; }; "ID": { "alias": "ID"; "required": false; }; "Props": { "alias": "Props"; "required": false; }; "TabCloseable": { "alias": "TabCloseable"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -26,17 +26,59 @@ export class MJTabComponent extends MJTabBase {
         this._tabSelected = value;
         this.cdr.detectChanges(); // Manually trigger change detection to update the view
     }
+    get Visible() {
+        return this._visible;
+    }
+    set Visible(value) {
+        this._visible = value;
+        // whenever the visible property changes we need to set the display style to none if it is not visible and make sure
+        // we're not selected and set to tab index of 0 if we're selected
+        // Step 1 - get the elementRef and set our display to none
+        if (!this._visible)
+            this.elementRef.nativeElement.style.display = value ? "" : "none";
+        else
+            this.elementRef.nativeElement.style.display = "";
+        // Step 2 - if we're not visible, make sure we're not selected
+        if (!this._visible)
+            this.tabstrip.SelectedTabIndex = 0;
+    }
+    get Name() {
+        return this._name;
+    }
+    set Name(value) {
+        this._name = value;
+    }
+    get ID() {
+        return this._id;
+    }
+    set ID(value) {
+        this._id = value;
+    }
+    /**
+     * A property bag that can be used to store any additional properties that you want to associate with this tab.
+     */
+    get Props() {
+        return this._props;
+    }
+    set Props(value) {
+        this._props = value;
+    }
     /**
      * Returns a reference to the tab strip that this tab belongs to.
      */
     get TabStrip() {
         return this.tabstrip;
     }
-    constructor(tabstrip, cdr) {
+    constructor(tabstrip, cdr, elementRef) {
         super();
         this.tabstrip = tabstrip;
         this.cdr = cdr;
+        this.elementRef = elementRef;
         this._tabSelected = false;
+        this._visible = true;
+        this._name = "";
+        this._id = null;
+        this._props = null;
         /**
          * Determines if the tab can be closed by a user, or not. Defaults to false.
          */
@@ -61,8 +103,8 @@ 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), 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) {
+MJTabComponent.ɵfac = function MJTabComponent_Factory(t) { return new (t || MJTabComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+MJTabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabComponent, selectors: [["mj-tab"]], inputs: { TabSelected: "TabSelected", Visible: "Visible", Name: "Name", ID: "ID", Props: "Props", 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); });
@@ -79,7 +121,15 @@ 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)\">\n    <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\n    <span *ngIf=\"TabCloseable\" class=\"tab-close-button\" (click)=\"closeTab($event)\" >\u2716</span>\n</div>", styles: ["\n  .single-tab {\n    flex: 0 0 auto; /* Prevent tabs from shrinking */\n    cursor: pointer;\n    height: 26px;\n    margin-right: 1px;\n    padding-left: 10px;\n    padding-right: 10px;\n    padding-top: 5px;\n    border-radius: 8px 8px 0 0;\n    border-top: solid 1px #D5D8E5;;\n    border-left: solid 1px #D5D8E5;;\n    border-right: solid 1px #D5D8E5;;\n    border-bottom: 0;\n    background-color: #D5D8E5;\n    font-size: 14px;\n  }\n  .single-tab:hover {\n    color: #bb443c;\n  }\n  .single-tab-selected {\n    background-color: #F5F6FA;\n    font-weight: bold;\n  }\n  \n  .tab-close-button {\n    cursor: pointer;\n    margin-left: 10px;\n    padding: 2px;\n    font-size: 12px;\n    border-radius: 10px;\n    color: black;\n  }\n  .tab-close-button:hover {\n    background-color: lightgray;\n  }\n "] }]
     }], () => [{ type: i1.MJTabStripComponent, decorators: [{
                 type: Host
-            }] }, { type: i0.ChangeDetectorRef }], { TabSelected: [{
+            }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { TabSelected: [{
+            type: Input
+        }], Visible: [{
+            type: Input
+        }], Name: [{
+            type: Input
+        }], ID: [{
+            type: Input
+        }], Props: [{
             type: Input
         }], TabCloseable: [{
             type: Input

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

@@ -36,6 +36,13 @@ export declare class MJTabStripComponent implements AfterContentInit, AfterConte
      */
     get SelectedTabIndex(): number;
     set SelectedTabIndex(index: number);
+    /**
+     * This method will attempt to set the current tab by name. If the tab is found, it will be selected and the method will return the tab object. If the tab is not found, the method will return undefined.
+     * @param tabName
+     * @returns
+     */
+    SelectTabByName(tabName: string): MJTabComponent | undefined;
+    GetTabByName(tabName: string): MJTabComponent | undefined;
     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.
@@ -57,12 +64,22 @@ export declare class MJTabStripComponent implements AfterContentInit, AfterConte
      * This event is fired when a tab is right-clicked and the context menu event from the tab header fires.
      */
     TabContextMenu: EventEmitter<TabContextMenuEvent>;
+    /**
+     * This event is fired whenever the tab control is scrolled left or right. This event can be invoked either due to a user clicking on the left/right buttons or by calling the scrollLeft/scrollRight methods, or by
+     * the ScrollIntoView method being called.
+     */
+    TabScrolled: EventEmitter<any>;
     tabs: QueryList<MJTabComponent>;
     tabBodies: QueryList<MJTabBodyComponent>;
     private _viewInitialized;
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
+    /**
+     * Call this method if you are ever dynamically adding or removing tabs from the component over time using @if or *ngIf or other similar methods. This will force the tab strip to
+     * re-evaluate the tabs and tab bodies and update the display accordingly.
+     */
+    RefreshTabs(): void;
     protected syncTabIndexes(): void;
     /**
      * Returns a read-only (copy) of the tabs in this tab strip.
@@ -81,10 +98,19 @@ export declare class MJTabStripComponent implements AfterContentInit, AfterConte
     showLeftButton: boolean;
     showRightButton: boolean;
     onResize(event: any): void;
-    checkTabScrollButtons(): void;
-    scrollTabHeader(scrollAmount: number): void;
+    protected checkTabScrollButtons(): void;
+    protected scrollTabHeader(scrollAmount: number): void;
+    /**
+     * This property determines how many pixels to scroll when the scrollLeft or scrollRight methods are called.
+     */
+    ScrollAmount: number;
     scrollLeft(): void;
     scrollRight(): void;
+    /**
+     * This method will scroll the specified tab index into view if it is not currently visible in the tab strip.
+     * @param tabIndex
+     */
+    scrollIntoView(tabIndex: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJTabStripComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJTabStripComponent, "mj-tabstrip", never, { "FillWidth": { "alias": "FillWidth"; "required": false; }; "FillHeight": { "alias": "FillHeight"; "required": false; }; "SelectedTabIndex": { "alias": "SelectedTabIndex"; "required": false; }; }, { "BeforeTabSelected": "BeforeTabSelected"; "TabSelected": "TabSelected"; "BeforeTabClosed": "BeforeTabClosed"; "TabClosed": "TabClosed"; "TabContextMenu": "TabContextMenu"; }, ["tabs", "tabBodies"], ["mj-tab", "mj-tab-body"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJTabStripComponent, "mj-tabstrip", never, { "FillWidth": { "alias": "FillWidth"; "required": false; }; "FillHeight": { "alias": "FillHeight"; "required": false; }; "SelectedTabIndex": { "alias": "SelectedTabIndex"; "required": false; }; "ScrollAmount": { "alias": "ScrollAmount"; "required": false; }; }, { "BeforeTabSelected": "BeforeTabSelected"; "TabSelected": "TabSelected"; "BeforeTabClosed": "BeforeTabClosed"; "TabClosed": "TabClosed"; "TabContextMenu": "TabContextMenu"; "TabScrolled": "TabScrolled"; }, ["tabs", "tabBodies"], ["mj-tab", "mj-tab-body"], false, never>;
 }

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

@@ -78,9 +78,18 @@ export class MJTabStripComponent {
          * 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 event is fired whenever the tab control is scrolled left or right. This event can be invoked either due to a user clicking on the left/right buttons or by calling the scrollLeft/scrollRight methods, or by
+         * the ScrollIntoView method being called.
+         */
+        this.TabScrolled = new EventEmitter();
         this._viewInitialized = false;
         this.showLeftButton = false;
         this.showRightButton = false;
+        /**
+         * This property determines how many pixels to scroll when the scrollLeft or scrollRight methods are called.
+         */
+        this.ScrollAmount = 150;
     }
     /**
      * The index of the selected tab. You can get/set this value and it will change the displayed tab.
@@ -89,6 +98,7 @@ export class MJTabStripComponent {
         return this._selectedTabIndex;
     }
     set SelectedTabIndex(index) {
+        var _a;
         // check to make sure that the new index is different from the current index and only do the work here if it is different
         MJTabStripComponent.OutputDebugMessage(`MJTabStripComponent.SelectedTabIndex(${index})`);
         if (index !== this._selectedTabIndex) {
@@ -98,23 +108,45 @@ export class MJTabStripComponent {
                 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);
+            if ((_a = props.tab) === null || _a === void 0 ? void 0 : _a.Visible) {
+                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
+                throw new Error(`Tab index ${index} is not visible and cannot be selected.`);
         }
         else {
             // always do this even if we're not firing event since we're already on the right tab
             this.innerRefreshTabVisibility(index);
         }
     }
+    /**
+     * This method will attempt to set the current tab by name. If the tab is found, it will be selected and the method will return the tab object. If the tab is not found, the method will return undefined.
+     * @param tabName
+     * @returns
+     */
+    SelectTabByName(tabName) {
+        const tab = this.GetTabByName(tabName);
+        if (tab) {
+            if (tab.Visible)
+                this.SelectedTabIndex = tab.index;
+            else
+                throw new Error(`Tab ${tabName} is not visible and cannot be selected.`);
+        }
+        return tab;
+    }
+    GetTabByName(tabName) {
+        return this.tabs.find(t => { var _a; return ((_a = t.Name) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) === tabName.trim().toLowerCase(); });
+    }
     innerRefreshTabVisibility(index) {
         Promise.resolve().then(() => {
             var _a, _b;
@@ -142,6 +174,15 @@ export class MJTabStripComponent {
         this.syncTabIndexes();
         this.checkTabScrollButtons();
     }
+    /**
+     * Call this method if you are ever dynamically adding or removing tabs from the component over time using @if or *ngIf or other similar methods. This will force the tab strip to
+     * re-evaluate the tabs and tab bodies and update the display accordingly.
+     */
+    RefreshTabs() {
+        this.cdr.detectChanges();
+        this.syncTabIndexes();
+        this.innerRefreshTabVisibility(this.SelectedTabIndex);
+    }
     syncTabIndexes() {
         if (!this._viewInitialized)
             return; // don't do anything until the view is initialized  
@@ -243,6 +284,7 @@ export class MJTabStripComponent {
             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
+            this.TabScrolled.emit();
         }
     }
     scrollLeft() {
@@ -251,6 +293,39 @@ export class MJTabStripComponent {
     scrollRight() {
         this.scrollTabHeader(-150);
     }
+    /**
+     * This method will scroll the specified tab index into view if it is not currently visible in the tab strip.
+     * @param tabIndex
+     */
+    scrollIntoView(tabIndex) {
+        // In this method, we need to calculate the current left position of the specified tab, 
+        // if it is not visible we need to scroll left or scroll right sufficiently in order to ensure that the tab specified is visible
+        // we do NOT change tab selection, the caller can do that separately if they want to
+        if (tabIndex >= 0 && tabIndex < this.tabs.length) {
+            const tab = this.tabs.toArray()[tabIndex];
+            if (tab) {
+                const tabElement = tab.elementRef.nativeElement;
+                if (tabElement) {
+                    const tabLeft = tabElement.offsetLeft;
+                    const tabRight = tabLeft + tabElement.offsetWidth;
+                    const container = this.tabInnerContainer.nativeElement;
+                    const containerLeft = container.offsetLeft;
+                    const containerRight = containerLeft + container.offsetWidth;
+                    if (tabLeft < containerLeft) {
+                        // tab is off to the left, scroll left
+                        this.scrollTabHeader(tabLeft - containerLeft);
+                    }
+                    else if (tabRight > containerRight) {
+                        // tab is off to the right, scroll right
+                        this.scrollTabHeader(tabRight - containerRight);
+                    }
+                    else {
+                        // tab is already visible, do nothing
+                    }
+                }
+            }
+        }
+    }
 }
 MJTabStripComponent.OutputDebugInfo = false;
 MJTabStripComponent.ɵfac = function MJTabStripComponent_Factory(t) { return new (t || MJTabStripComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
@@ -268,7 +343,7 @@ 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: { FillWidth: "FillWidth", FillHeight: "FillHeight", SelectedTabIndex: "SelectedTabIndex" }, outputs: { BeforeTabSelected: "BeforeTabSelected", TabSelected: "TabSelected", BeforeTabClosed: "BeforeTabClosed", TabClosed: "TabClosed", TabContextMenu: "TabContextMenu" }, ngContentSelectors: _c2, decls: 9, vars: 6, consts: [["mjFillContainer", "", 1, "tabstrip-container", 3, "fillWidth", "fillHeight"], [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", 3, "fillWidth", "fillHeight"], [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) {
+    } }, inputs: { FillWidth: "FillWidth", FillHeight: "FillHeight", SelectedTabIndex: "SelectedTabIndex", ScrollAmount: "ScrollAmount" }, outputs: { BeforeTabSelected: "BeforeTabSelected", TabSelected: "TabSelected", BeforeTabClosed: "BeforeTabClosed", TabClosed: "TabClosed", TabContextMenu: "TabContextMenu", TabScrolled: "TabScrolled" }, ngContentSelectors: _c2, decls: 9, vars: 6, consts: [["mjFillContainer", "", 1, "tabstrip-container", 3, "fillWidth", "fillHeight"], [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", 3, "fillWidth", "fillHeight"], [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_div_2_Template, 2, 0, "div", 2);
@@ -308,6 +383,8 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
             type: Output
         }], TabContextMenu: [{
             type: Output
+        }], TabScrolled: [{
+            type: Output
         }], tabs: [{
             type: ContentChildren,
             args: [MJTabComponent]
@@ -320,5 +397,7 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
         }], onResize: [{
             type: HostListener,
             args: ['window:resize', ['$event']]
+        }], ScrollAmount: [{
+            type: Input
         }] }); })();
 (() => { (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": "1.4.0",
+  "version": "1.4.1",
   "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",
@@ -23,8 +23,8 @@
     "@angular/core": "~17.2.2"
   },
   "dependencies": {
-    "@memberjunction/ng-container-directives": "~1.4.0",
-    "@memberjunction/ng-shared": "~1.4.0",
+    "@memberjunction/ng-container-directives": "~1.4.1",
+    "@memberjunction/ng-shared": "~1.4.1",
     "tslib": "^2.3.0"
   },
   "sideEffects": false