@memberjunction/ng-tabstrip 0.9.12 → 0.9.13
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.
|
@@ -2,9 +2,11 @@ import { MJTabBase } from '../tab.base';
|
|
|
2
2
|
import { MJTabStripComponent } from '../tab-strip/tab-strip.component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class MJTabBodyComponent extends MJTabBase {
|
|
5
|
-
private
|
|
5
|
+
private tabStrip;
|
|
6
6
|
TabVisible: boolean;
|
|
7
|
-
|
|
7
|
+
FillWidth: boolean;
|
|
8
|
+
FillHeight: boolean;
|
|
9
|
+
constructor(tabStrip: MJTabStripComponent);
|
|
8
10
|
static ɵfac: i0.ɵɵFactoryDeclaration<MJTabBodyComponent, [{ host: true; }]>;
|
|
9
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MJTabBodyComponent, "mj-tab-body", never, { "TabVisible": { "alias": "TabVisible"; "required": false; }; }, {}, never, ["*"], false, never>;
|
|
11
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MJTabBodyComponent, "mj-tab-body", never, { "TabVisible": { "alias": "TabVisible"; "required": false; }; "FillWidth": { "alias": "FillWidth"; "required": false; }; "FillHeight": { "alias": "FillHeight"; "required": false; }; }, {}, never, ["*"], false, never>;
|
|
10
12
|
}
|
|
@@ -5,27 +5,33 @@ import * as i1 from "../tab-strip/tab-strip.component";
|
|
|
5
5
|
import * as i2 from "@memberjunction/ng-container-directives";
|
|
6
6
|
const _c0 = ["*"];
|
|
7
7
|
export class MJTabBodyComponent extends MJTabBase {
|
|
8
|
-
constructor(
|
|
8
|
+
constructor(tabStrip) {
|
|
9
9
|
super();
|
|
10
|
-
this.
|
|
10
|
+
this.tabStrip = tabStrip;
|
|
11
11
|
this.TabVisible = false;
|
|
12
|
+
this.FillWidth = true;
|
|
13
|
+
this.FillHeight = true;
|
|
12
14
|
}
|
|
13
15
|
}
|
|
14
16
|
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:
|
|
17
|
+
MJTabBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabBodyComponent, selectors: [["mj-tab-body"]], inputs: { TabVisible: "TabVisible", FillWidth: "FillWidth", FillHeight: "FillHeight" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 2, vars: 3, consts: [["mjFillContainer", "", 1, "tab-body", 3, "hidden", "fillHeight", "fillWidth"]], template: function MJTabBodyComponent_Template(rf, ctx) { if (rf & 1) {
|
|
16
18
|
i0.ɵɵprojectionDef();
|
|
17
19
|
i0.ɵɵelementStart(0, "div", 0);
|
|
18
20
|
i0.ɵɵprojection(1);
|
|
19
21
|
i0.ɵɵelementEnd();
|
|
20
22
|
} if (rf & 2) {
|
|
21
|
-
i0.ɵɵproperty("hidden", !ctx.TabVisible);
|
|
23
|
+
i0.ɵɵproperty("hidden", !ctx.TabVisible)("fillHeight", ctx.FillHeight)("fillWidth", ctx.FillWidth);
|
|
22
24
|
} }, 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
25
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabBodyComponent, [{
|
|
24
26
|
type: Component,
|
|
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 } "] }]
|
|
27
|
+
args: [{ selector: 'mj-tab-body', template: "<div class=\"tab-body\" [hidden]=\"!TabVisible\" mjFillContainer [fillHeight]=\"FillHeight\" [fillWidth]=\"FillWidth\">\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
28
|
}], () => [{ type: i1.MJTabStripComponent, decorators: [{
|
|
27
29
|
type: Host
|
|
28
30
|
}] }], { TabVisible: [{
|
|
29
31
|
type: Input
|
|
32
|
+
}], FillWidth: [{
|
|
33
|
+
type: Input
|
|
34
|
+
}], FillHeight: [{
|
|
35
|
+
type: Input
|
|
30
36
|
}] }); })();
|
|
31
37
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabBodyComponent, { className: "MJTabBodyComponent", filePath: "src\\lib\\tab-body\\tab-body.component.ts", lineNumber: 11 }); })();
|
|
@@ -27,6 +27,8 @@ export declare class MJTabStripComponent implements AfterContentInit, AfterConte
|
|
|
27
27
|
private cdr;
|
|
28
28
|
protected _selectedTabIndex: number;
|
|
29
29
|
constructor(cdr: ChangeDetectorRef);
|
|
30
|
+
FillWidth: boolean;
|
|
31
|
+
FillHeight: boolean;
|
|
30
32
|
/**
|
|
31
33
|
* The index of the selected tab. You can get/set this value and it will change the displayed tab.
|
|
32
34
|
*/
|
|
@@ -82,5 +84,5 @@ export declare class MJTabStripComponent implements AfterContentInit, AfterConte
|
|
|
82
84
|
scrollLeft(): void;
|
|
83
85
|
scrollRight(): void;
|
|
84
86
|
static ɵfac: i0.ɵɵFactoryDeclaration<MJTabStripComponent, never>;
|
|
85
|
-
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>;
|
|
87
|
+
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>;
|
|
86
88
|
}
|
|
@@ -50,7 +50,9 @@ export class TabContextMenuEvent extends TabEvent {
|
|
|
50
50
|
export class MJTabStripComponent {
|
|
51
51
|
constructor(cdr) {
|
|
52
52
|
this.cdr = cdr;
|
|
53
|
-
this._selectedTabIndex =
|
|
53
|
+
this._selectedTabIndex = 0; // default to negative 1 so any valid value of 0+ will invoke a state change internally later
|
|
54
|
+
this.FillWidth = true;
|
|
55
|
+
this.FillHeight = true;
|
|
54
56
|
/**
|
|
55
57
|
* This event is fired before a tab is selected. If you set cancel to true, the tab will not be selected.
|
|
56
58
|
*/
|
|
@@ -108,14 +110,17 @@ export class MJTabStripComponent {
|
|
|
108
110
|
}
|
|
109
111
|
}
|
|
110
112
|
innerRefreshTabVisibility(index) {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
113
|
+
Promise.resolve().then(() => {
|
|
114
|
+
// do this within a Promise.resolve() to ensure that the change detection has a chance to catch up before we start changing things
|
|
115
|
+
var _a, _b;
|
|
116
|
+
// 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
|
|
117
|
+
(_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, i) => tab.TabSelected = i === index);
|
|
118
|
+
(_b = this.tabBodies) === null || _b === void 0 ? void 0 : _b.forEach((body, i) => body.TabVisible = i === index);
|
|
119
|
+
// let angular now it needs to update its change detection
|
|
120
|
+
this.cdr.detectChanges();
|
|
121
|
+
// also ask for a resize now
|
|
122
|
+
SharedService.Instance.InvokeManualResize();
|
|
123
|
+
});
|
|
119
124
|
}
|
|
120
125
|
ngAfterViewInit() {
|
|
121
126
|
this._viewInitialized = true;
|
|
@@ -254,7 +259,7 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
254
259
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabInnerContainer = _t.first);
|
|
255
260
|
} }, hostBindings: function MJTabStripComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
256
261
|
i0.ɵɵlistener("resize", function MJTabStripComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow);
|
|
257
|
-
} }, inputs: { SelectedTabIndex: "SelectedTabIndex" }, outputs: { BeforeTabSelected: "BeforeTabSelected", TabSelected: "TabSelected", BeforeTabClosed: "BeforeTabClosed", TabClosed: "TabClosed", TabContextMenu: "TabContextMenu" }, ngContentSelectors: _c2, decls: 9, vars:
|
|
262
|
+
} }, 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) {
|
|
258
263
|
i0.ɵɵprojectionDef(_c1);
|
|
259
264
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
260
265
|
i0.ɵɵtemplate(2, MJTabStripComponent_div_2_Template, 2, 0, "div", 2);
|
|
@@ -267,15 +272,22 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
267
272
|
i0.ɵɵprojection(8, 1);
|
|
268
273
|
i0.ɵɵelementEnd()();
|
|
269
274
|
} if (rf & 2) {
|
|
275
|
+
i0.ɵɵproperty("fillWidth", ctx.FillWidth)("fillHeight", ctx.FillHeight);
|
|
270
276
|
i0.ɵɵadvance(2);
|
|
271
277
|
i0.ɵɵproperty("ngIf", ctx.showLeftButton);
|
|
272
278
|
i0.ɵɵadvance(4);
|
|
273
279
|
i0.ɵɵproperty("ngIf", ctx.showRightButton);
|
|
274
|
-
|
|
280
|
+
i0.ɵɵadvance();
|
|
281
|
+
i0.ɵɵproperty("fillWidth", ctx.FillWidth)("fillHeight", ctx.FillHeight);
|
|
282
|
+
} }, dependencies: [i1.NgIf, i2.FillContainer], styles: [".tabstrip-container[_ngcontent-%COMP%] {\r\n display: block;\r\n overflow: hidden;\r\n font-size: 14px; \n\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}\r\n\r\n.tab-scroll-button[_ngcontent-%COMP%] {\r\n padding: 8px 10px 10px 8px;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n background-color: lightblue;\r\n}\r\n.tab-scroll-button[_ngcontent-%COMP%]:hover {\r\n background-color: pink;\r\n}"] });
|
|
275
283
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripComponent, [{
|
|
276
284
|
type: Component,
|
|
277
|
-
args: [{ selector: 'mj-tabstrip', template: "
|
|
278
|
-
}], () => [{ type: i0.ChangeDetectorRef }], {
|
|
285
|
+
args: [{ selector: 'mj-tabstrip', template: "<div class=\"tabstrip-container\" mjFillContainer [fillWidth]=\"FillWidth\" [fillHeight]=\"FillHeight\">\r\n <!-- Tab Headers -->\r\n <div class=\"tab-header-outer\">\r\n <div *ngIf=\"showLeftButton\" class=\"tab-scroll-button tab-scroll-button-left\" (click)=\"scrollLeft()\">\r\n <span class=\"fa-solid fa-caret-left\"></span>\r\n </div>\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 <div *ngIf=\"showRightButton\" class=\"tab-scroll-button tab-scroll-button-right\" (click)=\"scrollRight()\">\r\n <span class=\"fa-solid fa-caret-right\"></span>\r\n </div>\r\n </div>\r\n <!-- Tab Content -->\r\n <div class=\"tab-bodies\" mjFillContainer [fillWidth]=\"FillWidth\" [fillHeight]=\"FillHeight\">\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 display: block;\r\n overflow: hidden;\r\n font-size: 14px; /*default font size*/\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.tab-scroll-button {\r\n padding: 8px 10px 10px 8px;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n background-color: lightblue;\r\n}\r\n.tab-scroll-button:hover {\r\n background-color: pink;\r\n}\r\n\r\n "] }]
|
|
286
|
+
}], () => [{ type: i0.ChangeDetectorRef }], { FillWidth: [{
|
|
287
|
+
type: Input
|
|
288
|
+
}], FillHeight: [{
|
|
289
|
+
type: Input
|
|
290
|
+
}], SelectedTabIndex: [{
|
|
279
291
|
type: Input
|
|
280
292
|
}], BeforeTabSelected: [{
|
|
281
293
|
type: Output
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-tabstrip",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.13",
|
|
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.151",
|
|
27
27
|
"@memberjunction/ng-shared": "^0.9.53",
|
|
28
28
|
"tslib": "^2.3.0"
|
|
29
29
|
},
|