globuswebcomponents 2.6.1 → 2.6.2
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/cjs/{gb-action-panel_61.cjs.entry.js → gb-action-panel_63.cjs.entry.js} +260 -15
- package/dist/cjs/gb-action-panel_63.cjs.entry.js.map +1 -0
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-input-field/gb-input-field.js +15 -12
- package/dist/collection/components/gb-input-field/gb-input-field.js.map +1 -1
- package/dist/collection/components/gb-nav-bar/gb-nav-bar.js +98 -98
- package/dist/collection/components/gb-nav-bar/gb-nav-bar.js.map +1 -1
- package/dist/collection/components/gb-nav-bar-item/gb-nav-bar-item.css +4 -0
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js +1 -1
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/components/gb-header.js +1 -1
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-input-field.js +1 -1
- package/dist/components/gb-nav-bar-item.js +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/components/gb-nav-bar.js +98 -98
- package/dist/components/gb-nav-bar.js.map +1 -1
- package/dist/components/gb-pagination.js +2 -2
- package/dist/components/gb-table-header.js +2 -2
- package/dist/components/{p-CZt4BvQa.js → p-B2CfUeJe.js} +3 -3
- package/dist/components/{p-CZt4BvQa.js.map → p-B2CfUeJe.js.map} +1 -1
- package/dist/components/{p-D8sTe7Rd.js → p-CEE4M4bL.js} +17 -14
- package/dist/components/p-CEE4M4bL.js.map +1 -0
- package/dist/components/{p-BB5zWLnP.js → p-Ck4z413l.js} +3 -3
- package/dist/components/{p-BB5zWLnP.js.map → p-Ck4z413l.js.map} +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/{gb-action-panel_61.entry.js → gb-action-panel_63.entry.js} +259 -16
- package/dist/esm/gb-action-panel_63.entry.js.map +1 -0
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-4ecee275.entry.js → p-4e4d5b26.entry.js} +2 -2
- package/dist/globuscomponents/p-4e4d5b26.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/cjs/gb-action-panel_61.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-nav-bar-item.cjs.entry.js +0 -51
- package/dist/cjs/gb-nav-bar-item.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-nav-bar-item.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-nav-bar.cjs.entry.js +0 -205
- package/dist/cjs/gb-nav-bar.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-nav-bar.entry.cjs.js.map +0 -1
- package/dist/components/p-D8sTe7Rd.js.map +0 -1
- package/dist/esm/gb-action-panel_61.entry.js.map +0 -1
- package/dist/esm/gb-nav-bar-item.entry.js +0 -49
- package/dist/esm/gb-nav-bar-item.entry.js.map +0 -1
- package/dist/esm/gb-nav-bar.entry.js +0 -203
- package/dist/esm/gb-nav-bar.entry.js.map +0 -1
- package/dist/globuscomponents/gb-nav-bar-item.entry.esm.js.map +0 -1
- package/dist/globuscomponents/gb-nav-bar.entry.esm.js.map +0 -1
- package/dist/globuscomponents/p-1473caf4.entry.js +0 -2
- package/dist/globuscomponents/p-1473caf4.entry.js.map +0 -1
- package/dist/globuscomponents/p-4ecee275.entry.js.map +0 -1
- package/dist/globuscomponents/p-81bfe1c7.entry.js +0 -2
- package/dist/globuscomponents/p-81bfe1c7.entry.js.map +0 -1
|
@@ -2,102 +2,102 @@ import { getAssetPath, h } from "@stencil/core";
|
|
|
2
2
|
export class GbNavBar {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.items = [
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
5
|
+
{
|
|
6
|
+
label: 'First',
|
|
7
|
+
icon: 'assets/home-02.svg',
|
|
8
|
+
iconOnly: false,
|
|
9
|
+
index: 0,
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: 'Second',
|
|
13
|
+
icon: 'assets/bank.svg',
|
|
14
|
+
iconOnly: false,
|
|
15
|
+
index: 1,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: 'Second',
|
|
19
|
+
icon: 'assets/money-02.svg',
|
|
20
|
+
iconOnly: false,
|
|
21
|
+
index: 2,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: 'Second',
|
|
25
|
+
icon: 'assets/invoice-01.svg',
|
|
26
|
+
iconOnly: false,
|
|
27
|
+
index: 3,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: 'Second',
|
|
31
|
+
icon: 'assets/money-exchange-03.svg',
|
|
32
|
+
iconOnly: false,
|
|
33
|
+
index: 4,
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: 'Second',
|
|
37
|
+
icon: 'assets/percent.svg',
|
|
38
|
+
iconOnly: false,
|
|
39
|
+
index: 5,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: 'Second',
|
|
43
|
+
icon: 'assets/qr-code.svg',
|
|
44
|
+
iconOnly: false,
|
|
45
|
+
index: 6,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: 'Second',
|
|
49
|
+
icon: 'assets/coins-dollar.svg',
|
|
50
|
+
iconOnly: false,
|
|
51
|
+
index: 7,
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: 'Second',
|
|
55
|
+
icon: 'assets/star.svg',
|
|
56
|
+
iconOnly: false,
|
|
57
|
+
index: 8,
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: 'Second',
|
|
61
|
+
icon: 'assets/star.svg',
|
|
62
|
+
iconOnly: false,
|
|
63
|
+
index: 9,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
label: 'Second',
|
|
67
|
+
icon: 'assets/star.svg',
|
|
68
|
+
iconOnly: false,
|
|
69
|
+
index: 10,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: 'Second',
|
|
73
|
+
icon: 'assets/star.svg',
|
|
74
|
+
iconOnly: false,
|
|
75
|
+
index: 11,
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
label: 'Second',
|
|
79
|
+
icon: 'assets/star.svg',
|
|
80
|
+
iconOnly: false,
|
|
81
|
+
index: 12,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label: 'Second',
|
|
85
|
+
icon: 'assets/star.svg',
|
|
86
|
+
iconOnly: false,
|
|
87
|
+
index: 13,
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
label: 'Second',
|
|
91
|
+
icon: 'assets/star.svg',
|
|
92
|
+
iconOnly: false,
|
|
93
|
+
index: 14,
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
label: 'Second',
|
|
97
|
+
icon: 'assets/star.svg',
|
|
98
|
+
iconOnly: false,
|
|
99
|
+
index: 15,
|
|
100
|
+
},
|
|
101
101
|
];
|
|
102
102
|
this.showBorder = true;
|
|
103
103
|
this.activeIndex = 0;
|
|
@@ -183,7 +183,7 @@ export class GbNavBar {
|
|
|
183
183
|
}
|
|
184
184
|
render() {
|
|
185
185
|
const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
|
|
186
|
-
return (h("div", { key: '
|
|
186
|
+
return (h("div", { key: '5ec0924c17f6901ec40b5cf88b443aa974e9f13f', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '8ea2d35845f639de8c9ef13cbb68071a05048f74', class: "pattern" }, h("img", { key: 'ff3f29ecb879f5402b2aad54b42477457755b4ed', src: patternSrc, alt: "" }))), h("div", { key: 'fa3c4904f4cc4d15a5339cd193ef13c6e8c0cfa5', class: "top_bar_content" }, h("div", { key: '912508359331b1fbefcf09c26ebd20953b20b925', style: { visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' } }, this.internalItems.map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label })))), h("div", { key: '03b7a69ebbd39db9934d4d25abdd62aa91db4636', class: `content ${this.dropdownOpen ? 'shown' : ''}`, ref: el => (this.containerEl = el) }, (this.measured ? this.visibleItems : this.internalItems).map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index) }))), this.measured && this.overflowItems.length > 0 && (h("div", { key: 'b2b47fd6394966da35998f635c03546c75b49c10', class: "more" }, h("gb-nav-bar-item", { key: '8fcc4b6ecdfc2e993643142a24e2e433def97714', state: this.dropdownItemClicked ? 'active' : 'default', "icon-only": false, category: this.category, icon: "assets/more.svg", label: "More", class: "more_button", onClick: () => this.toggleDropdown() }), this.dropdownOpen && (h("div", { key: 'f90425b3b441292ebc825695eecf4f667cabff43', class: "dropdown_menu" }, this.overflowItems.map(tab => (h("gb-dropdown-items-with-shortcut", { icon: true, state: "default", iconSrc: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index, true) })))))))))));
|
|
187
187
|
}
|
|
188
188
|
static get is() { return "gb-nav-bar"; }
|
|
189
189
|
static get encapsulation() { return "shadow"; }
|
|
@@ -240,7 +240,7 @@ export class GbNavBar {
|
|
|
240
240
|
},
|
|
241
241
|
"getter": false,
|
|
242
242
|
"setter": false,
|
|
243
|
-
"defaultValue": "[\r\n
|
|
243
|
+
"defaultValue": "[\r\n {\r\n label: 'First',\r\n icon: 'assets/home-02.svg',\r\n iconOnly: false,\r\n index: 0,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/bank.svg',\r\n iconOnly: false,\r\n index: 1,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/money-02.svg',\r\n iconOnly: false,\r\n index: 2,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/invoice-01.svg',\r\n iconOnly: false,\r\n index: 3,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/money-exchange-03.svg',\r\n iconOnly: false,\r\n index: 4,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/percent.svg',\r\n iconOnly: false,\r\n index: 5,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/qr-code.svg',\r\n iconOnly: false,\r\n index: 6,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/coins-dollar.svg',\r\n iconOnly: false,\r\n index: 7,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 8,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 9,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 10,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 11,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 12,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 13,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 14,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 15,\r\n },\r\n ]"
|
|
244
244
|
},
|
|
245
245
|
"showBorder": {
|
|
246
246
|
"type": "boolean",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-nav-bar.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar/gb-nav-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar',\r\n styleUrl: 'gb-nav-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBar {\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop({ mutable: true }) items: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [\r\n // {\r\n // label: 'First',\r\n // icon: 'assets/home-02.svg',\r\n // iconOnly: false,\r\n // index: 0,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/bank.svg',\r\n // iconOnly: false,\r\n // index: 1,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/money-02.svg',\r\n // iconOnly: false,\r\n // index: 2,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/invoice-01.svg',\r\n // iconOnly: false,\r\n // index: 3,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/money-exchange-03.svg',\r\n // iconOnly: false,\r\n // index: 4,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/percent.svg',\r\n // iconOnly: false,\r\n // index: 5,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/qr-code.svg',\r\n // iconOnly: false,\r\n // index: 6,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/coins-dollar.svg',\r\n // iconOnly: false,\r\n // index: 7,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 8,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 9,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 10,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 11,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 12,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 13,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 14,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 15,\r\n // },\r\n ];\r\n @Prop() showBorder: boolean = true;\r\n @Prop({ mutable: true }) activeIndex: number = 0;\r\n @Element() el: HTMLElement;\r\n @State() internalItems: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [...this.items];\r\n @State() visibleItems: typeof this.items = [];\r\n @State() overflowItems: typeof this.items = [];\r\n @State() measured: boolean = false;\r\n @State() dropdownOpen: boolean = false;\r\n @State() dropdownItemClicked: boolean = false;\r\n @Event() navBarItemClicked: EventEmitter<number>;\r\n\r\n private containerEl!: HTMLElement;\r\n\r\n onTabItemClicked(index: number, clicked?: boolean) {\r\n this.dropdownItemClicked = false;\r\n this.activeIndex = index;\r\n this.navBarItemClicked.emit(index);\r\n\r\n if (clicked) {\r\n this.dropdownItemClicked = true;\r\n this.dropdownOpen = false;\r\n }\r\n }\r\n\r\n @Watch('items')\r\n onItemsChanged(newValue: { label: string; icon: string; iconOnly: boolean; index: number }[], _oldValue) {\r\n console.log(newValue);\r\n this.internalItems = [...newValue];\r\n // console.log(this.internalItems);\r\n\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n componentWillLoad() {\r\n // setTimeout(() => {\r\n // this.items = [\r\n // {\r\n // label: 'First',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 0,\r\n // },\r\n // ];\r\n // }, 3000);\r\n\r\n this.internalItems = this.items; // copy initial prop value safely\r\n }\r\n\r\n private handleResize = () => {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n }, 0);\r\n };\r\n\r\n componentDidLoad() {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener('resize', this.handleResize);\r\n }\r\n\r\n calculateOverflow() {\r\n const hiddenContainer = this.el.shadowRoot.querySelector('[style*=\"visibility: hidden\"]');\r\n if (!hiddenContainer) return;\r\n\r\n let containerWidth = this.containerEl.offsetWidth;\r\n let usedWidth = 0;\r\n const visible = [];\r\n const hidden = [];\r\n\r\n const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));\r\n\r\n allItems.forEach((el, i) => {\r\n const itemWidth = (el as HTMLElement).offsetWidth + 16;\r\n if (usedWidth + itemWidth < containerWidth - 120) {\r\n usedWidth += itemWidth;\r\n visible.push(this.internalItems[i]);\r\n } else {\r\n hidden.push(this.internalItems[i]);\r\n }\r\n });\r\n\r\n this.visibleItems = visible;\r\n console.log(this.visibleItems);\r\n this.overflowItems = hidden;\r\n }\r\n\r\n toggleDropdown() {\r\n this.dropdownOpen = !this.dropdownOpen;\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n return (\r\n <div class={`top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"top_bar_content\">\r\n {/* Hidden measurement container for overflow calculation */}\r\n <div style={{ visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' }}>\r\n {this.internalItems.map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n ></gb-nav-bar-item>\r\n ))}\r\n </div>\r\n <div class={`content ${this.dropdownOpen ? 'shown' : ''}`} ref={el => (this.containerEl = el)}>\r\n {(this.measured ? this.visibleItems : this.internalItems).map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index)}\r\n ></gb-nav-bar-item>\r\n ))}\r\n {this.measured && this.overflowItems.length > 0 && (\r\n <div class=\"more\">\r\n <gb-nav-bar-item\r\n state={this.dropdownItemClicked ? 'active' : 'default'}\r\n icon-only={false}\r\n category={this.category}\r\n icon=\"assets/more.svg\"\r\n label=\"More\"\r\n class=\"more_button\"\r\n onClick={() => this.toggleDropdown()}\r\n ></gb-nav-bar-item>\r\n {this.dropdownOpen && (\r\n <div class=\"dropdown_menu\">\r\n {this.overflowItems.map(tab => (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n state=\"default\"\r\n iconSrc={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index, true)}\r\n ></gb-dropdown-items-with-shortcut>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"gb-nav-bar.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar/gb-nav-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar',\r\n styleUrl: 'gb-nav-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBar {\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop({ mutable: true }) items: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [\r\n {\r\n label: 'First',\r\n icon: 'assets/home-02.svg',\r\n iconOnly: false,\r\n index: 0,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/bank.svg',\r\n iconOnly: false,\r\n index: 1,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/money-02.svg',\r\n iconOnly: false,\r\n index: 2,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/invoice-01.svg',\r\n iconOnly: false,\r\n index: 3,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/money-exchange-03.svg',\r\n iconOnly: false,\r\n index: 4,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/percent.svg',\r\n iconOnly: false,\r\n index: 5,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/qr-code.svg',\r\n iconOnly: false,\r\n index: 6,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/coins-dollar.svg',\r\n iconOnly: false,\r\n index: 7,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 8,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 9,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 10,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 11,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 12,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 13,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 14,\r\n },\r\n {\r\n label: 'Second',\r\n icon: 'assets/star.svg',\r\n iconOnly: false,\r\n index: 15,\r\n },\r\n ];\r\n @Prop() showBorder: boolean = true;\r\n @Prop({ mutable: true }) activeIndex: number = 0;\r\n @Element() el: HTMLElement;\r\n @State() internalItems: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [...this.items];\r\n @State() visibleItems: typeof this.items = [];\r\n @State() overflowItems: typeof this.items = [];\r\n @State() measured: boolean = false;\r\n @State() dropdownOpen: boolean = false;\r\n @State() dropdownItemClicked: boolean = false;\r\n @Event() navBarItemClicked: EventEmitter<number>;\r\n\r\n private containerEl!: HTMLElement;\r\n\r\n onTabItemClicked(index: number, clicked?: boolean) {\r\n this.dropdownItemClicked = false;\r\n this.activeIndex = index;\r\n this.navBarItemClicked.emit(index);\r\n\r\n if (clicked) {\r\n this.dropdownItemClicked = true;\r\n this.dropdownOpen = false;\r\n }\r\n }\r\n\r\n @Watch('items')\r\n onItemsChanged(newValue: { label: string; icon: string; iconOnly: boolean; index: number }[], _oldValue) {\r\n console.log(newValue);\r\n this.internalItems = [...newValue];\r\n // console.log(this.internalItems);\r\n\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n componentWillLoad() {\r\n // setTimeout(() => {\r\n // this.items = [\r\n // {\r\n // label: 'First',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 0,\r\n // },\r\n // ];\r\n // }, 3000);\r\n\r\n this.internalItems = this.items; // copy initial prop value safely\r\n }\r\n\r\n private handleResize = () => {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n }, 0);\r\n };\r\n\r\n componentDidLoad() {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener('resize', this.handleResize);\r\n }\r\n\r\n calculateOverflow() {\r\n const hiddenContainer = this.el.shadowRoot.querySelector('[style*=\"visibility: hidden\"]');\r\n if (!hiddenContainer) return;\r\n\r\n let containerWidth = this.containerEl.offsetWidth;\r\n let usedWidth = 0;\r\n const visible = [];\r\n const hidden = [];\r\n\r\n const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));\r\n\r\n allItems.forEach((el, i) => {\r\n const itemWidth = (el as HTMLElement).offsetWidth + 16;\r\n if (usedWidth + itemWidth < containerWidth - 120) {\r\n usedWidth += itemWidth;\r\n visible.push(this.internalItems[i]);\r\n } else {\r\n hidden.push(this.internalItems[i]);\r\n }\r\n });\r\n\r\n this.visibleItems = visible;\r\n console.log(this.visibleItems);\r\n this.overflowItems = hidden;\r\n }\r\n\r\n toggleDropdown() {\r\n this.dropdownOpen = !this.dropdownOpen;\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n return (\r\n <div class={`top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"top_bar_content\">\r\n {/* Hidden measurement container for overflow calculation */}\r\n <div style={{ visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' }}>\r\n {this.internalItems.map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n ></gb-nav-bar-item>\r\n ))}\r\n </div>\r\n <div class={`content ${this.dropdownOpen ? 'shown' : ''}`} ref={el => (this.containerEl = el)}>\r\n {(this.measured ? this.visibleItems : this.internalItems).map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index)}\r\n ></gb-nav-bar-item>\r\n ))}\r\n {this.measured && this.overflowItems.length > 0 && (\r\n <div class=\"more\">\r\n <gb-nav-bar-item\r\n state={this.dropdownItemClicked ? 'active' : 'default'}\r\n icon-only={false}\r\n category={this.category}\r\n icon=\"assets/more.svg\"\r\n label=\"More\"\r\n class=\"more_button\"\r\n onClick={() => this.toggleDropdown()}\r\n ></gb-nav-bar-item>\r\n {this.dropdownOpen && (\r\n <div class=\"dropdown_menu\">\r\n {this.overflowItems.map(tab => (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n state=\"default\"\r\n iconSrc={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index, true)}\r\n ></gb-dropdown-items-with-shortcut>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -60,7 +60,7 @@ export class GbNavBarSidemenu {
|
|
|
60
60
|
// </div>
|
|
61
61
|
// </div>
|
|
62
62
|
// );
|
|
63
|
-
return (h("div", { key: '7ddf2de9b62709c12509bd134606ccd7a59e43eb', class: "nav_bar_wrapper" }, h("gb-vertical-tabs", { key: '0cf57245067a212efd4986d970983e2f57ef6cf4', class: "vertical_tabs", size: "
|
|
63
|
+
return (h("div", { key: '7ddf2de9b62709c12509bd134606ccd7a59e43eb', class: "nav_bar_wrapper" }, h("gb-vertical-tabs", { key: '0cf57245067a212efd4986d970983e2f57ef6cf4', class: "vertical_tabs", size: "sm", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) }), h("div", { key: 'a80c96ae6eae825f3705d30022c1265945ec16cd', class: "wrapper" }, h("div", { key: 'c965af18ee337c0164757e1efc751c09fa6d409e', class: "wrapper_pattern" }, h("img", { key: '76502e56b9b87eb4586b45d9302cd05b761e3306', src: patternSrc, alt: "" })), h("div", { key: 'b68a40743f2160ed9d29d83d2f96952ba73e8738', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("slot", { key: '1950c31a36207b5e8ae99637e018c69f6b3a701e', name: "application_name" }))));
|
|
64
64
|
}
|
|
65
65
|
static get is() { return "gb-nav-bar-sidemenu"; }
|
|
66
66
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-nav-bar-sidemenu.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,gBAAgB;IAL7B;QAMU,oBAAe,GAAW,EAAE,CAAC;QAC7B,oBAAe,GAAW,EAAE,CAAC;QAC7B,gBAAW,GAAW,CAAC,CAAC;QACxB,SAAI,GAAsC;YAChD;gBACE,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,CAAC;aACT;YACD;gBACE,IAAI,EAAE,qBAAqB;gBAC3B,KAAK,EAAE,CAAC;aACT;YACD;gBACE,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,CAAC;aACT;YACD;gBACE,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CAAC;aACT;SACF,CAAC;QACO,mBAAc,GAAW,EAAE,CAAC;KAmEtC;IA/DC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAE3E,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAE9D,WAAW;QACX,uCAAuC;QACvC,sCAAsC;QACtC,mLAAmL;QACnL,aAAa;QACb,4BAA4B;QAC5B,sCAAsC;QACtC,0CAA0C;QAC1C,eAAe;QACf,+EAA+E;QAC/E,uCAAuC;QACvC,gDAAgD;QAChD,eAAe;QACf,aAAa;QACb,WAAW;QACX,KAAK;QAEL,OAAO,CACL,4DAAK,KAAK,EAAC,iBAAiB;YAC1B,yEACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,gBAAgB,kBACP,IAAI,CAAC,WAAW,EAC9B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAChC;YACpB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC3B;gBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;gBACtE,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar-sidemenu',\r\n styleUrl: 'gb-nav-bar-sidemenu.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBarSidemenu {\r\n @Prop() applicationName: string = '';\r\n @Prop() applicationIcon: string = '';\r\n @Prop() activeIndex: number = 0;\r\n @Prop() tabs: { name: string; index: number }[] = [\r\n {\r\n name: 'Accounts',\r\n index: 0,\r\n },\r\n {\r\n name: 'Transaction history',\r\n index: 1,\r\n },\r\n {\r\n name: 'TPP report',\r\n index: 1,\r\n },\r\n {\r\n name: 'Check dump history',\r\n index: 1,\r\n },\r\n ];\r\n @State() leadingIconSvg: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<void>;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n this.leadingIconSvg = svg;\r\n }\r\n\r\n onTabItemClicked(event) {\r\n this.navBarItemClicked.emit(event.detail);\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.applicationIcon);\r\n }\r\n\r\n componentDidLoad() {\r\n const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n if (applicationName) {\r\n applicationName.classList.add('text-lg-bold');\r\n }\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n // return (\r\n // <div class=\"top_bar_sidemenu_div\">\r\n // <div class=\"vertical_tabs_div\">\r\n // <gb-vertical-tabs size=\"md\" tabs={this.tabs} type=\"button_primary\" active-index={this.activeIndex} onTabItemClicked={this.onTabItemClicked.bind(this)}></gb-vertical-tabs>\r\n // </div>\r\n // <div class=\"wrapper\">\r\n // <div class=\"wrapper_pattern\">\r\n // <img src={patternSrc} alt=\"\" />\r\n // </div>\r\n // <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n // <div class=\"application_name\">\r\n // <slot name=\"application_name\"></slot>\r\n // </div>\r\n // </div>\r\n // </div>\r\n // );\r\n\r\n return (\r\n <div class=\"nav_bar_wrapper\">\r\n <gb-vertical-tabs\r\n class=\"vertical_tabs\"\r\n size=\"
|
|
1
|
+
{"version":3,"file":"gb-nav-bar-sidemenu.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,gBAAgB;IAL7B;QAMU,oBAAe,GAAW,EAAE,CAAC;QAC7B,oBAAe,GAAW,EAAE,CAAC;QAC7B,gBAAW,GAAW,CAAC,CAAC;QACxB,SAAI,GAAsC;YAChD;gBACE,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,CAAC;aACT;YACD;gBACE,IAAI,EAAE,qBAAqB;gBAC3B,KAAK,EAAE,CAAC;aACT;YACD;gBACE,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,CAAC;aACT;YACD;gBACE,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CAAC;aACT;SACF,CAAC;QACO,mBAAc,GAAW,EAAE,CAAC;KAmEtC;IA/DC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAE3E,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAE9D,WAAW;QACX,uCAAuC;QACvC,sCAAsC;QACtC,mLAAmL;QACnL,aAAa;QACb,4BAA4B;QAC5B,sCAAsC;QACtC,0CAA0C;QAC1C,eAAe;QACf,+EAA+E;QAC/E,uCAAuC;QACvC,gDAAgD;QAChD,eAAe;QACf,aAAa;QACb,WAAW;QACX,KAAK;QAEL,OAAO,CACL,4DAAK,KAAK,EAAC,iBAAiB;YAC1B,yEACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,gBAAgB,kBACP,IAAI,CAAC,WAAW,EAC9B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAChC;YACpB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC3B;gBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;gBACtE,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar-sidemenu',\r\n styleUrl: 'gb-nav-bar-sidemenu.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBarSidemenu {\r\n @Prop() applicationName: string = '';\r\n @Prop() applicationIcon: string = '';\r\n @Prop() activeIndex: number = 0;\r\n @Prop() tabs: { name: string; index: number }[] = [\r\n {\r\n name: 'Accounts',\r\n index: 0,\r\n },\r\n {\r\n name: 'Transaction history',\r\n index: 1,\r\n },\r\n {\r\n name: 'TPP report',\r\n index: 1,\r\n },\r\n {\r\n name: 'Check dump history',\r\n index: 1,\r\n },\r\n ];\r\n @State() leadingIconSvg: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<void>;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n this.leadingIconSvg = svg;\r\n }\r\n\r\n onTabItemClicked(event) {\r\n this.navBarItemClicked.emit(event.detail);\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.applicationIcon);\r\n }\r\n\r\n componentDidLoad() {\r\n const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n if (applicationName) {\r\n applicationName.classList.add('text-lg-bold');\r\n }\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n // return (\r\n // <div class=\"top_bar_sidemenu_div\">\r\n // <div class=\"vertical_tabs_div\">\r\n // <gb-vertical-tabs size=\"md\" tabs={this.tabs} type=\"button_primary\" active-index={this.activeIndex} onTabItemClicked={this.onTabItemClicked.bind(this)}></gb-vertical-tabs>\r\n // </div>\r\n // <div class=\"wrapper\">\r\n // <div class=\"wrapper_pattern\">\r\n // <img src={patternSrc} alt=\"\" />\r\n // </div>\r\n // <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n // <div class=\"application_name\">\r\n // <slot name=\"application_name\"></slot>\r\n // </div>\r\n // </div>\r\n // </div>\r\n // );\r\n\r\n return (\r\n <div class=\"nav_bar_wrapper\">\r\n <gb-vertical-tabs\r\n class=\"vertical_tabs\"\r\n size=\"sm\"\r\n tabs={this.tabs}\r\n type=\"button_primary\"\r\n active-index={this.activeIndex}\r\n onTabItemClicked={this.onTabItemClicked.bind(this)}\r\n ></gb-vertical-tabs>\r\n <div class=\"wrapper\">\r\n <div class=\"wrapper_pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n <slot name=\"application_name\"></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -16,7 +16,7 @@ import { d as defineCustomElement$g } from './p-DOTwBmnj.js';
|
|
|
16
16
|
import { d as defineCustomElement$f } from './p-bcUEPNaG.js';
|
|
17
17
|
import { d as defineCustomElement$e } from './p-CueSLF9_.js';
|
|
18
18
|
import { d as defineCustomElement$d } from './p-C-BQpShI.js';
|
|
19
|
-
import { d as defineCustomElement$c } from './p-
|
|
19
|
+
import { d as defineCustomElement$c } from './p-CEE4M4bL.js';
|
|
20
20
|
import { d as defineCustomElement$b } from './p-CC-mFPRz.js';
|
|
21
21
|
import { d as defineCustomElement$a } from './p-B-ya_CCi.js';
|
|
22
22
|
import { d as defineCustomElement$9 } from './p-Dlfnel8C.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { G as GbInputDropdown$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { G as GbInputDropdown$1, d as defineCustomElement$1 } from './p-Ck4z413l.js';
|
|
2
2
|
|
|
3
3
|
const GbInputDropdown = GbInputDropdown$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -74,7 +74,7 @@ const GbNavBarSidemenu$1 = /*@__PURE__*/ proxyCustomElement(class GbNavBarSideme
|
|
|
74
74
|
// </div>
|
|
75
75
|
// </div>
|
|
76
76
|
// );
|
|
77
|
-
return (h("div", { key: '7ddf2de9b62709c12509bd134606ccd7a59e43eb', class: "nav_bar_wrapper" }, h("gb-vertical-tabs", { key: '0cf57245067a212efd4986d970983e2f57ef6cf4', class: "vertical_tabs", size: "
|
|
77
|
+
return (h("div", { key: '7ddf2de9b62709c12509bd134606ccd7a59e43eb', class: "nav_bar_wrapper" }, h("gb-vertical-tabs", { key: '0cf57245067a212efd4986d970983e2f57ef6cf4', class: "vertical_tabs", size: "sm", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) }), h("div", { key: 'a80c96ae6eae825f3705d30022c1265945ec16cd', class: "wrapper" }, h("div", { key: 'c965af18ee337c0164757e1efc751c09fa6d409e', class: "wrapper_pattern" }, h("img", { key: '76502e56b9b87eb4586b45d9302cd05b761e3306', src: patternSrc, alt: "" })), h("div", { key: 'b68a40743f2160ed9d29d83d2f96952ba73e8738', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("slot", { key: '1950c31a36207b5e8ae99637e018c69f6b3a701e', name: "application_name" }))));
|
|
78
78
|
}
|
|
79
79
|
get el() { return this; }
|
|
80
80
|
static get style() { return gbNavBarSidemenuCss; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-nav-bar-sidemenu.js","mappings":"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","names":["GbNavBarSidemenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.css?tag=gb-nav-bar-sidemenu&encapsulation=shadow","src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.tsx"],"sourcesContent":[".nav_bar_wrapper {\r\n display: flex;\r\n width: 17.5rem;\r\n height: 100%;\r\n padding: var(--spacing-6) var(--spacing-7);\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n border-right: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-sizing: border-box;\r\n}\r\n\r\n.vertical_tabs {\r\n width: 100%;\r\n}\r\n\r\n.wrapper {\r\n display: flex;\r\n padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-gray-subtlest, #f6f8fa);\r\n position: relative;\r\n height: auto;\r\n overflow: hidden;\r\n}\r\n\r\n.wrapper_pattern {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n::slotted([slot='application_name']) {\r\n color: var(--color-text-information-bold, #042f59) !important;\r\n}\r\n\r\n.application_icon path[stroke]{\r\n stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon path[fill]{\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}","import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar-sidemenu',\r\n styleUrl: 'gb-nav-bar-sidemenu.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBarSidemenu {\r\n @Prop() applicationName: string = '';\r\n @Prop() applicationIcon: string = '';\r\n @Prop() activeIndex: number = 0;\r\n @Prop() tabs: { name: string; index: number }[] = [\r\n {\r\n name: 'Accounts',\r\n index: 0,\r\n },\r\n {\r\n name: 'Transaction history',\r\n index: 1,\r\n },\r\n {\r\n name: 'TPP report',\r\n index: 1,\r\n },\r\n {\r\n name: 'Check dump history',\r\n index: 1,\r\n },\r\n ];\r\n @State() leadingIconSvg: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<void>;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n this.leadingIconSvg = svg;\r\n }\r\n\r\n onTabItemClicked(event) {\r\n this.navBarItemClicked.emit(event.detail);\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.applicationIcon);\r\n }\r\n\r\n componentDidLoad() {\r\n const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n if (applicationName) {\r\n applicationName.classList.add('text-lg-bold');\r\n }\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n // return (\r\n // <div class=\"top_bar_sidemenu_div\">\r\n // <div class=\"vertical_tabs_div\">\r\n // <gb-vertical-tabs size=\"md\" tabs={this.tabs} type=\"button_primary\" active-index={this.activeIndex} onTabItemClicked={this.onTabItemClicked.bind(this)}></gb-vertical-tabs>\r\n // </div>\r\n // <div class=\"wrapper\">\r\n // <div class=\"wrapper_pattern\">\r\n // <img src={patternSrc} alt=\"\" />\r\n // </div>\r\n // <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n // <div class=\"application_name\">\r\n // <slot name=\"application_name\"></slot>\r\n // </div>\r\n // </div>\r\n // </div>\r\n // );\r\n\r\n return (\r\n <div class=\"nav_bar_wrapper\">\r\n <gb-vertical-tabs\r\n class=\"vertical_tabs\"\r\n size=\"
|
|
1
|
+
{"file":"gb-nav-bar-sidemenu.js","mappings":"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","names":["GbNavBarSidemenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.css?tag=gb-nav-bar-sidemenu&encapsulation=shadow","src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.tsx"],"sourcesContent":[".nav_bar_wrapper {\r\n display: flex;\r\n width: 17.5rem;\r\n height: 100%;\r\n padding: var(--spacing-6) var(--spacing-7);\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n border-right: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-sizing: border-box;\r\n}\r\n\r\n.vertical_tabs {\r\n width: 100%;\r\n}\r\n\r\n.wrapper {\r\n display: flex;\r\n padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-gray-subtlest, #f6f8fa);\r\n position: relative;\r\n height: auto;\r\n overflow: hidden;\r\n}\r\n\r\n.wrapper_pattern {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n::slotted([slot='application_name']) {\r\n color: var(--color-text-information-bold, #042f59) !important;\r\n}\r\n\r\n.application_icon path[stroke]{\r\n stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon path[fill]{\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}","import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar-sidemenu',\r\n styleUrl: 'gb-nav-bar-sidemenu.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBarSidemenu {\r\n @Prop() applicationName: string = '';\r\n @Prop() applicationIcon: string = '';\r\n @Prop() activeIndex: number = 0;\r\n @Prop() tabs: { name: string; index: number }[] = [\r\n {\r\n name: 'Accounts',\r\n index: 0,\r\n },\r\n {\r\n name: 'Transaction history',\r\n index: 1,\r\n },\r\n {\r\n name: 'TPP report',\r\n index: 1,\r\n },\r\n {\r\n name: 'Check dump history',\r\n index: 1,\r\n },\r\n ];\r\n @State() leadingIconSvg: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<void>;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n this.leadingIconSvg = svg;\r\n }\r\n\r\n onTabItemClicked(event) {\r\n this.navBarItemClicked.emit(event.detail);\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.applicationIcon);\r\n }\r\n\r\n componentDidLoad() {\r\n const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n if (applicationName) {\r\n applicationName.classList.add('text-lg-bold');\r\n }\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n // return (\r\n // <div class=\"top_bar_sidemenu_div\">\r\n // <div class=\"vertical_tabs_div\">\r\n // <gb-vertical-tabs size=\"md\" tabs={this.tabs} type=\"button_primary\" active-index={this.activeIndex} onTabItemClicked={this.onTabItemClicked.bind(this)}></gb-vertical-tabs>\r\n // </div>\r\n // <div class=\"wrapper\">\r\n // <div class=\"wrapper_pattern\">\r\n // <img src={patternSrc} alt=\"\" />\r\n // </div>\r\n // <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n // <div class=\"application_name\">\r\n // <slot name=\"application_name\"></slot>\r\n // </div>\r\n // </div>\r\n // </div>\r\n // );\r\n\r\n return (\r\n <div class=\"nav_bar_wrapper\">\r\n <gb-vertical-tabs\r\n class=\"vertical_tabs\"\r\n size=\"sm\"\r\n tabs={this.tabs}\r\n type=\"button_primary\"\r\n active-index={this.activeIndex}\r\n onTabItemClicked={this.onTabItemClicked.bind(this)}\r\n ></gb-vertical-tabs>\r\n <div class=\"wrapper\">\r\n <div class=\"wrapper_pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n <slot name=\"application_name\"></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|