@memberjunction/ng-tabstrip 0.9.4 → 0.9.5
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.
package/dist/lib/module.js
CHANGED
|
@@ -12,17 +12,17 @@ export class MJTabBodyComponent extends MJTabBase {
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
MJTabBodyComponent.ɵfac = function MJTabBodyComponent_Factory(t) { return new (t || MJTabBodyComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1)); };
|
|
15
|
-
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) {
|
|
15
|
+
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) {
|
|
16
16
|
i0.ɵɵprojectionDef();
|
|
17
17
|
i0.ɵɵelementStart(0, "div", 0);
|
|
18
18
|
i0.ɵɵprojection(1);
|
|
19
19
|
i0.ɵɵelementEnd();
|
|
20
20
|
} if (rf & 2) {
|
|
21
21
|
i0.ɵɵproperty("hidden", !ctx.TabVisible);
|
|
22
|
-
} }, dependencies: [i2.FillContainer] });
|
|
22
|
+
} }, 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 }"] });
|
|
23
23
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabBodyComponent, [{
|
|
24
24
|
type: Component,
|
|
25
|
-
args: [{ selector: 'mj-tab-body', template: "<div [hidden]=\"!TabVisible\" mjFillContainer>\r\n <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\r\n</div>" }]
|
|
25
|
+
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 } "] }]
|
|
26
26
|
}], () => [{ type: i1.MJTabStripComponent, decorators: [{
|
|
27
27
|
type: Host
|
|
28
28
|
}] }], { TabVisible: [{
|
|
@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
10
10
|
import { Component, Input, EventEmitter, Output, ContentChildren, ViewChild, HostListener } from '@angular/core';
|
|
11
11
|
import { MJTabComponent } from '../tab/tab.component';
|
|
12
12
|
import { MJTabBodyComponent } from '../tab-body/tab-body.component';
|
|
13
|
+
import { SharedService } from '@memberjunction/ng-shared';
|
|
13
14
|
import * as i0 from "@angular/core";
|
|
14
15
|
import * as i1 from "@angular/common";
|
|
15
16
|
import * as i2 from "@memberjunction/ng-container-directives";
|
|
@@ -21,11 +22,10 @@ function MJTabStripComponent_button_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
21
22
|
i0.ɵɵtext(1, "\u21E6");
|
|
22
23
|
i0.ɵɵelementEnd();
|
|
23
24
|
} }
|
|
24
|
-
function
|
|
25
|
+
function MJTabStripComponent_span_6_Template(rf, ctx) { if (rf & 1) {
|
|
25
26
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
26
|
-
i0.ɵɵelementStart(0, "
|
|
27
|
-
i0.ɵɵlistener("click", function
|
|
28
|
-
i0.ɵɵtext(1, "\u21E8");
|
|
27
|
+
i0.ɵɵelementStart(0, "span", 8);
|
|
28
|
+
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()); });
|
|
29
29
|
i0.ɵɵelementEnd();
|
|
30
30
|
} }
|
|
31
31
|
const _c1 = [[["mj-tab"]], [["mj-tab-body"]]];
|
|
@@ -110,6 +110,8 @@ export class MJTabStripComponent {
|
|
|
110
110
|
// 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
|
|
111
111
|
(_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, i) => tab.TabSelected = i === index);
|
|
112
112
|
(_b = this.tabBodies) === null || _b === void 0 ? void 0 : _b.forEach((body, i) => body.TabVisible = i === index);
|
|
113
|
+
// also ask for a resize now
|
|
114
|
+
SharedService.Instance.InvokeManualResize();
|
|
113
115
|
}
|
|
114
116
|
ngAfterViewInit() {
|
|
115
117
|
this._viewInitialized = true;
|
|
@@ -247,14 +249,14 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
247
249
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabInnerContainer = _t.first);
|
|
248
250
|
} }, hostBindings: function MJTabStripComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
249
251
|
i0.ɵɵlistener("resize", function MJTabStripComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow);
|
|
250
|
-
} }, 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", ""], ["
|
|
252
|
+
} }, 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) {
|
|
251
253
|
i0.ɵɵprojectionDef(_c1);
|
|
252
254
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
253
255
|
i0.ɵɵtemplate(2, MJTabStripComponent_button_2_Template, 2, 0, "button", 2);
|
|
254
256
|
i0.ɵɵelementStart(3, "div", 3, 4);
|
|
255
257
|
i0.ɵɵprojection(5);
|
|
256
258
|
i0.ɵɵelementEnd();
|
|
257
|
-
i0.ɵɵtemplate(6,
|
|
259
|
+
i0.ɵɵtemplate(6, MJTabStripComponent_span_6_Template, 1, 0, "span", 5);
|
|
258
260
|
i0.ɵɵelementEnd();
|
|
259
261
|
i0.ɵɵelementStart(7, "div", 6);
|
|
260
262
|
i0.ɵɵprojection(8, 1);
|
|
@@ -264,10 +266,10 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
264
266
|
i0.ɵɵproperty("ngIf", ctx.showLeftButton);
|
|
265
267
|
i0.ɵɵadvance(4);
|
|
266
268
|
i0.ɵɵproperty("ngIf", ctx.showRightButton);
|
|
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}
|
|
269
|
+
} }, 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}"] });
|
|
268
270
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripComponent, [{
|
|
269
271
|
type: Component,
|
|
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 <
|
|
272
|
+
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 "] }]
|
|
271
273
|
}], null, { SelectedTabIndex: [{
|
|
272
274
|
type: Input
|
|
273
275
|
}], BeforeTabSelected: [{
|
|
@@ -293,4 +295,4 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
293
295
|
type: HostListener,
|
|
294
296
|
args: ['window:resize', ['$event']]
|
|
295
297
|
}] }); })();
|
|
296
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabStripComponent, { className: "MJTabStripComponent", filePath: "src\\lib\\tab-strip\\tab-strip.component.ts", lineNumber:
|
|
298
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabStripComponent, { className: "MJTabStripComponent", filePath: "src\\lib\\tab-strip\\tab-strip.component.ts", lineNumber: 34 }); })();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-tabstrip",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.5",
|
|
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",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@memberjunction/ng-container-directives": "^0.9.148",
|
|
27
|
+
"@memberjunction/ng-shared": "^0.9.49",
|
|
27
28
|
"tslib": "^2.3.0"
|
|
28
29
|
},
|
|
29
30
|
"sideEffects": false
|