@memberjunction/ng-tabstrip 1.0.4 → 1.0.7-next.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.
|
@@ -73,10 +73,10 @@ MJTabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabCompone
|
|
|
73
73
|
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0, ctx.TabSelected));
|
|
74
74
|
i0.ɵɵadvance(2);
|
|
75
75
|
i0.ɵɵproperty("ngIf", ctx.TabCloseable);
|
|
76
|
-
} }, dependencies: [i2.NgClass, i2.NgIf], styles: [".single-tab[_ngcontent-%COMP%] {\
|
|
76
|
+
} }, dependencies: [i2.NgClass, i2.NgIf], styles: [".single-tab[_ngcontent-%COMP%] {\n flex: 0 0 auto; \n\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[_ngcontent-%COMP%]:hover {\n color: #bb443c;\n }\n .single-tab-selected[_ngcontent-%COMP%] {\n background-color: #F5F6FA;\n font-weight: bold;\n }\n \n .tab-close-button[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background-color: lightgray;\n }"] });
|
|
77
77
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabComponent, [{
|
|
78
78
|
type: Component,
|
|
79
|
-
args: [{ selector: 'mj-tab', template: "<div class=\"single-tab\" [ngClass]=\"{'single-tab-selected': TabSelected}\" (click)=\"selectTab()\" (contextmenu)=\"handleContextMenu($event)\">\
|
|
79
|
+
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 "] }]
|
|
80
80
|
}], () => [{ type: i1.MJTabStripComponent, decorators: [{
|
|
81
81
|
type: Host
|
|
82
82
|
}] }, { type: i0.ChangeDetectorRef }], { TabSelected: [{
|
|
@@ -84,4 +84,4 @@ MJTabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabCompone
|
|
|
84
84
|
}], TabCloseable: [{
|
|
85
85
|
type: Input
|
|
86
86
|
}] }); })();
|
|
87
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabComponent, { className: "MJTabComponent", filePath: "src
|
|
87
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabComponent, { className: "MJTabComponent", filePath: "src/lib/tab/tab.component.ts", lineNumber: 13 }); })();
|
|
@@ -21,10 +21,10 @@ MJTabBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabBod
|
|
|
21
21
|
i0.ɵɵelementEnd();
|
|
22
22
|
} if (rf & 2) {
|
|
23
23
|
i0.ɵɵproperty("hidden", !ctx.TabVisible)("fillHeight", ctx.FillHeight)("fillWidth", ctx.FillWidth);
|
|
24
|
-
} }, dependencies: [i2.FillContainer], styles: [".tab-body[_ngcontent-%COMP%] {\
|
|
24
|
+
} }, dependencies: [i2.FillContainer], styles: [".tab-body[_ngcontent-%COMP%] {\n border-top: 0;\n background-color: #F5F6FA; \n width: 100%;\n height: 200px;\n display: block;\n overflow: auto;\n }"] });
|
|
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\" mjFillContainer [fillHeight]=\"FillHeight\" [fillWidth]=\"FillWidth\">\
|
|
27
|
+
args: [{ selector: 'mj-tab-body', template: "<div class=\"tab-body\" [hidden]=\"!TabVisible\" mjFillContainer [fillHeight]=\"FillHeight\" [fillWidth]=\"FillWidth\">\n <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\n</div> ", styles: [" \n\n.tab-body {\n border-top: 0;\n background-color: #F5F6FA; \n width: 100%;\n height: 200px;\n display: block;\n overflow: auto;\n } "] }]
|
|
28
28
|
}], () => [{ type: i1.MJTabStripComponent, decorators: [{
|
|
29
29
|
type: Host
|
|
30
30
|
}] }], { TabVisible: [{
|
|
@@ -34,4 +34,4 @@ MJTabBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabBod
|
|
|
34
34
|
}], FillHeight: [{
|
|
35
35
|
type: Input
|
|
36
36
|
}] }); })();
|
|
37
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabBodyComponent, { className: "MJTabBodyComponent", filePath: "src
|
|
37
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabBodyComponent, { className: "MJTabBodyComponent", filePath: "src/lib/tab-body/tab-body.component.ts", lineNumber: 11 }); })();
|
|
@@ -279,10 +279,10 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
279
279
|
i0.ɵɵproperty("ngIf", ctx.showRightButton);
|
|
280
280
|
i0.ɵɵadvance();
|
|
281
281
|
i0.ɵɵproperty("fillWidth", ctx.FillWidth)("fillHeight", ctx.FillHeight);
|
|
282
|
-
} }, dependencies: [i1.NgIf, i2.FillContainer], styles: [".tabstrip-container[_ngcontent-%COMP%] {\
|
|
282
|
+
} }, dependencies: [i1.NgIf, i2.FillContainer], styles: [".tabstrip-container[_ngcontent-%COMP%] {\n display: block;\n overflow: hidden;\n font-size: 14px; \n\n}\n\n.tab-header-outer[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden; \n\n background-color: #D5D8E5;\n}\n\n.tab-header-inner[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n white-space: nowrap; \n\n position: relative; \n\n z-index: 1; \n\n\n padding-left: 5px;\n padding-top: 5px;\n background-color: #D5D8E5;\n border-bottom: #F5F6FA;\n}\n\n.tab-scroll-button-left[_ngcontent-%COMP%], .tab-scroll-button-right[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2; \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: lightblue;\n}\n.tab-scroll-button[_ngcontent-%COMP%]:hover {\n background-color: pink;\n}"] });
|
|
283
283
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripComponent, [{
|
|
284
284
|
type: Component,
|
|
285
|
-
args: [{ selector: 'mj-tabstrip', template: "<div class=\"tabstrip-container\" mjFillContainer [fillWidth]=\"FillWidth\" [fillHeight]=\"FillHeight\">\
|
|
285
|
+
args: [{ selector: 'mj-tabstrip', template: "<div class=\"tabstrip-container\" mjFillContainer [fillWidth]=\"FillWidth\" [fillHeight]=\"FillHeight\">\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\" mjFillContainer [fillWidth]=\"FillWidth\" [fillHeight]=\"FillHeight\">\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 overflow: hidden;\n font-size: 14px; /*default font size*/\n}\n\n.tab-header-outer {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden; /* Hide the overflow */\n background-color: #D5D8E5;\n}\n\n.tab-header-inner {\n display: flex;\n flex-direction: row;\n white-space: nowrap; /* Prevent wrapping of tabs */\n position: relative; /* Needed for z-index to work */\n z-index: 1; /* Place tabs above the content */\n\n padding-left: 5px;\n padding-top: 5px;\n background-color: #D5D8E5;\n border-bottom: #F5F6FA;\n}\n\n.tab-scroll-button-left, .tab-scroll-button-right {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2; /* 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: lightblue;\n}\n.tab-scroll-button:hover {\n background-color: pink;\n}\n\n "] }]
|
|
286
286
|
}], () => [{ type: i0.ChangeDetectorRef }], { FillWidth: [{
|
|
287
287
|
type: Input
|
|
288
288
|
}], FillHeight: [{
|
|
@@ -312,4 +312,4 @@ MJTabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabSt
|
|
|
312
312
|
type: HostListener,
|
|
313
313
|
args: ['window:resize', ['$event']]
|
|
314
314
|
}] }); })();
|
|
315
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabStripComponent, { className: "MJTabStripComponent", filePath: "src
|
|
315
|
+
(() => { (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,31 +1,31 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@memberjunction/ng-tabstrip",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "MemberJunction: Very simple tab strip component used in the MJ Explorer app and reusable anywhere else in an Angular project.",
|
|
5
|
-
"main": "./dist/public-api.js",
|
|
6
|
-
"typings": "./dist/public-api.d.ts",
|
|
7
|
-
"files": [
|
|
8
|
-
"/dist"
|
|
9
|
-
],
|
|
10
|
-
"scripts": {
|
|
11
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
|
-
"build": "ngc"
|
|
13
|
-
},
|
|
14
|
-
"keywords": [],
|
|
15
|
-
"author": "",
|
|
16
|
-
"license": "ISC",
|
|
17
|
-
"devDependencies": {
|
|
18
|
-
"@angular/compiler": "~17.2.2",
|
|
19
|
-
"@angular/compiler-cli": "~17.2.2"
|
|
20
|
-
},
|
|
21
|
-
"peerDependencies": {
|
|
22
|
-
"@angular/common": "~17.2.2",
|
|
23
|
-
"@angular/core": "~17.2.2"
|
|
24
|
-
},
|
|
25
|
-
"dependencies": {
|
|
26
|
-
"@memberjunction/ng-container-directives": "^1.0.
|
|
27
|
-
"@memberjunction/ng-shared": "^1.0.
|
|
28
|
-
"tslib": "^2.3.0"
|
|
29
|
-
},
|
|
30
|
-
"sideEffects": false
|
|
31
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@memberjunction/ng-tabstrip",
|
|
3
|
+
"version": "1.0.7-next.0",
|
|
4
|
+
"description": "MemberJunction: Very simple tab strip component used in the MJ Explorer app and reusable anywhere else in an Angular project.",
|
|
5
|
+
"main": "./dist/public-api.js",
|
|
6
|
+
"typings": "./dist/public-api.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"/dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
|
+
"build": "ngc"
|
|
13
|
+
},
|
|
14
|
+
"keywords": [],
|
|
15
|
+
"author": "",
|
|
16
|
+
"license": "ISC",
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@angular/compiler": "~17.2.2",
|
|
19
|
+
"@angular/compiler-cli": "~17.2.2"
|
|
20
|
+
},
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"@angular/common": "~17.2.2",
|
|
23
|
+
"@angular/core": "~17.2.2"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"@memberjunction/ng-container-directives": "^1.0.7-next.0",
|
|
27
|
+
"@memberjunction/ng-shared": "^1.0.7-next.0",
|
|
28
|
+
"tslib": "^2.3.0"
|
|
29
|
+
},
|
|
30
|
+
"sideEffects": false
|
|
31
|
+
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export class TabStripComponent {
|
|
4
|
-
}
|
|
5
|
-
TabStripComponent.ɵfac = function TabStripComponent_Factory(t) { return new (t || TabStripComponent)(); };
|
|
6
|
-
TabStripComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabStripComponent, selectors: [["mj-tabstrip"]], decls: 0, vars: 0, template: function TabStripComponent_Template(rf, ctx) { } });
|
|
7
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabStripComponent, [{
|
|
8
|
-
type: Component,
|
|
9
|
-
args: [{ selector: 'mj-tabstrip', template: "" }]
|
|
10
|
-
}], null, null); })();
|
|
11
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabStripComponent, { className: "TabStripComponent", filePath: "src\\lib\\tab-strip.component.ts", lineNumber: 9 }); })();
|