@memberjunction/ng-tabstrip 2.53.0 → 2.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -20,11 +20,11 @@ export class MJTabBodyComponent extends MJTabBase {
|
|
|
20
20
|
i0.ɵɵelementEnd();
|
|
21
21
|
} if (rf & 2) {
|
|
22
22
|
i0.ɵɵproperty("hidden", !ctx.TabVisible);
|
|
23
|
-
} }, styles: [".tab-body[_ngcontent-%COMP%] {\n
|
|
23
|
+
} }, styles: [".tab-body[_ngcontent-%COMP%] {\n border-top: 0;\n width: 100%;\n display: block;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100vh - 123px);\n }\n\n .tab-body[_ngcontent-%COMP%] .tab-body[_ngcontent-%COMP%] {\n height: auto;\n }"] });
|
|
24
24
|
}
|
|
25
25
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabBodyComponent, [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'mj-tab-body', template: "<div class=\"tab-body\" [hidden]=\"!TabVisible\">\n <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\n</div> ", styles: [" .tab-body {\n
|
|
27
|
+
args: [{ selector: 'mj-tab-body', template: "<div class=\"tab-body\" [hidden]=\"!TabVisible\">\n <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\n</div> ", styles: [" .tab-body {\n border-top: 0;\n width: 100%;\n display: block;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100vh - 123px);\n }\n\n .tab-body .tab-body {\n height: auto;\n }"] }]
|
|
28
28
|
}], () => [{ type: i1.MJTabStripComponent, decorators: [{
|
|
29
29
|
type: Host
|
|
30
30
|
}] }], { TabVisible: [{
|
|
@@ -359,11 +359,11 @@ export class MJTabStripComponent {
|
|
|
359
359
|
i0.ɵɵproperty("ngIf", ctx.showLeftButton);
|
|
360
360
|
i0.ɵɵadvance(4);
|
|
361
361
|
i0.ɵɵproperty("ngIf", ctx.showRightButton);
|
|
362
|
-
} }, dependencies: [i1.NgIf], styles: [".tabstrip-container[_ngcontent-%COMP%] {\n display: block;\n height: calc(100vh - 80px);\n overflow-y: auto;\n}\n\n.tab-header-outer[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n \n\n background-color: var(--gray-600);\n}\n\n.tab-header-inner[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n white-space: nowrap;\n \n\n position: relative;\n \n\n z-index: 1;\n \n\n padding-left: 5px;\n padding-top: 5px;\n}\n\n.tab-scroll-button-left[_ngcontent-%COMP%], \n.tab-scroll-button-right[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n \n\n}\n\n.tab-scroll-button-left[_ngcontent-%COMP%] {\n left: 0;\n}\n\n.tab-scroll-button-right[_ngcontent-%COMP%] {\n right: 0;\n}\n\n.tab-scroll-button[_ngcontent-%COMP%] {\n padding: 8px 10px 10px 8px;\n cursor: pointer;\n border-radius: 6px;\n background-color: var(--gray-700);\n}\n\n.tab-scroll-button[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-blue);\n}"] });
|
|
362
|
+
} }, dependencies: [i1.NgIf], styles: [".tabstrip-container[_ngcontent-%COMP%] {\n display: block;\n height: calc(100vh - 80px);\n overflow-y: auto;\n}\n\n.tabstrip-container[_ngcontent-%COMP%] .tabstrip-container[_ngcontent-%COMP%] {\n display: block;\n height: auto;\n}\n\n.tab-header-outer[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n \n\n background-color: var(--gray-600);\n}\n\n.tab-header-inner[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n white-space: nowrap;\n \n\n position: relative;\n \n\n z-index: 1;\n \n\n padding-left: 5px;\n padding-top: 5px;\n}\n\n.tab-scroll-button-left[_ngcontent-%COMP%], \n.tab-scroll-button-right[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n \n\n}\n\n.tab-scroll-button-left[_ngcontent-%COMP%] {\n left: 0;\n}\n\n.tab-scroll-button-right[_ngcontent-%COMP%] {\n right: 0;\n}\n\n.tab-scroll-button[_ngcontent-%COMP%] {\n padding: 8px 10px 10px 8px;\n cursor: pointer;\n border-radius: 6px;\n background-color: var(--gray-700);\n}\n\n.tab-scroll-button[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-blue);\n}"] });
|
|
363
363
|
}
|
|
364
364
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripComponent, [{
|
|
365
365
|
type: Component,
|
|
366
|
-
args: [{ selector: 'mj-tabstrip', template: "<div class=\"tabstrip-container\">\n <!-- Tab Headers -->\n <div class=\"tab-header-outer\">\n <div *ngIf=\"showLeftButton\" class=\"tab-scroll-button tab-scroll-button-left\" (click)=\"scrollLeft()\">\n <span class=\"fa-solid fa-caret-left\"></span>\n </div>\n <div class=\"tab-header-inner\" #tabInnerContainer>\n <ng-content select=\"mj-tab\"></ng-content> <!-- Where <mj-tab> components are projected -->\n </div>\n <div *ngIf=\"showRightButton\" class=\"tab-scroll-button tab-scroll-button-right\" (click)=\"scrollRight()\">\n <span class=\"fa-solid fa-caret-right\"></span>\n </div>\n </div>\n <!-- Tab Content -->\n <div class=\"tab-bodies\">\n <ng-content select=\"mj-tab-body\"></ng-content> <!-- Where <mj-tab-body> components are projected -->\n </div>\n</div>", styles: [".tabstrip-container {\n display: block;\n height: calc(100vh - 80px);\n overflow-y: auto;\n}\n\n.tab-header-outer {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n /* Hide the overflow */\n background-color: var(--gray-600);\n}\n\n.tab-header-inner {\n display: flex;\n flex-direction: row;\n white-space: nowrap;\n /* Prevent wrapping of tabs */\n position: relative;\n /* Needed for z-index to work */\n z-index: 1;\n /* Place tabs above the content */\n padding-left: 5px;\n padding-top: 5px;\n}\n\n.tab-scroll-button-left,\n.tab-scroll-button-right {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n /* Ensure buttons are above the content */\n}\n\n.tab-scroll-button-left {\n left: 0;\n}\n\n.tab-scroll-button-right {\n right: 0;\n}\n\n.tab-scroll-button {\n padding: 8px 10px 10px 8px;\n cursor: pointer;\n border-radius: 6px;\n background-color: var(--gray-700);\n}\n\n.tab-scroll-button:hover {\n background-color: var(--mj-blue);\n}"] }]
|
|
366
|
+
args: [{ selector: 'mj-tabstrip', template: "<div class=\"tabstrip-container\">\n <!-- Tab Headers -->\n <div class=\"tab-header-outer\">\n <div *ngIf=\"showLeftButton\" class=\"tab-scroll-button tab-scroll-button-left\" (click)=\"scrollLeft()\">\n <span class=\"fa-solid fa-caret-left\"></span>\n </div>\n <div class=\"tab-header-inner\" #tabInnerContainer>\n <ng-content select=\"mj-tab\"></ng-content> <!-- Where <mj-tab> components are projected -->\n </div>\n <div *ngIf=\"showRightButton\" class=\"tab-scroll-button tab-scroll-button-right\" (click)=\"scrollRight()\">\n <span class=\"fa-solid fa-caret-right\"></span>\n </div>\n </div>\n <!-- Tab Content -->\n <div class=\"tab-bodies\">\n <ng-content select=\"mj-tab-body\"></ng-content> <!-- Where <mj-tab-body> components are projected -->\n </div>\n</div>", styles: [".tabstrip-container {\n display: block;\n height: calc(100vh - 80px);\n overflow-y: auto;\n}\n\n.tabstrip-container .tabstrip-container {\n display: block;\n height: auto;\n}\n\n.tab-header-outer {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n /* Hide the overflow */\n background-color: var(--gray-600);\n}\n\n.tab-header-inner {\n display: flex;\n flex-direction: row;\n white-space: nowrap;\n /* Prevent wrapping of tabs */\n position: relative;\n /* Needed for z-index to work */\n z-index: 1;\n /* Place tabs above the content */\n padding-left: 5px;\n padding-top: 5px;\n}\n\n.tab-scroll-button-left,\n.tab-scroll-button-right {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n /* Ensure buttons are above the content */\n}\n\n.tab-scroll-button-left {\n left: 0;\n}\n\n.tab-scroll-button-right {\n right: 0;\n}\n\n.tab-scroll-button {\n padding: 8px 10px 10px 8px;\n cursor: pointer;\n border-radius: 6px;\n background-color: var(--gray-700);\n}\n\n.tab-scroll-button:hover {\n background-color: var(--mj-blue);\n}"] }]
|
|
367
367
|
}], () => [{ type: i0.ChangeDetectorRef }], { FillWidth: [{
|
|
368
368
|
type: Input
|
|
369
369
|
}], FillHeight: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-tabstrip",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.55.0",
|
|
4
4
|
"description": "MemberJunction: Very simple tab strip component used in the MJ Explorer app and reusable anywhere else in an Angular project.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@angular/core": "18.0.2"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@memberjunction/ng-container-directives": "2.
|
|
26
|
+
"@memberjunction/ng-container-directives": "2.55.0",
|
|
27
27
|
"tslib": "^2.3.0"
|
|
28
28
|
},
|
|
29
29
|
"sideEffects": false
|