@memberjunction/ng-tabstrip 0.9.2 → 0.9.4
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.
|
@@ -114,12 +114,14 @@ export class MJTabStripComponent {
|
|
|
114
114
|
ngAfterViewInit() {
|
|
115
115
|
this._viewInitialized = true;
|
|
116
116
|
this.syncTabIndexes();
|
|
117
|
+
this.checkTabScrollButtons();
|
|
117
118
|
}
|
|
118
119
|
ngAfterContentInit() {
|
|
119
120
|
this.syncTabIndexes();
|
|
120
121
|
}
|
|
121
122
|
ngAfterContentChecked() {
|
|
122
123
|
this.syncTabIndexes();
|
|
124
|
+
this.checkTabScrollButtons();
|
|
123
125
|
}
|
|
124
126
|
syncTabIndexes() {
|
|
125
127
|
if (!this._viewInitialized)
|
|
@@ -262,10 +264,10 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
262
264
|
i0.ɵɵproperty("ngIf", ctx.showLeftButton);
|
|
263
265
|
i0.ɵɵadvance(4);
|
|
264
266
|
i0.ɵɵproperty("ngIf", ctx.showRightButton);
|
|
265
|
-
} }, 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}"] });
|
|
267
|
+
} }, 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}"] });
|
|
266
268
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripComponent, [{
|
|
267
269
|
type: Component,
|
|
268
|
-
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} "] }]
|
|
270
|
+
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} "] }]
|
|
269
271
|
}], null, { SelectedTabIndex: [{
|
|
270
272
|
type: Input
|
|
271
273
|
}], BeforeTabSelected: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-tabstrip",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.4",
|
|
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": "~17.2.2"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@memberjunction/ng-container-directives": "^0.9.
|
|
26
|
+
"@memberjunction/ng-container-directives": "^0.9.148",
|
|
27
27
|
"tslib": "^2.3.0"
|
|
28
28
|
},
|
|
29
29
|
"sideEffects": false
|