globuswebcomponents 2.6.6 → 2.6.8
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_66.cjs.entry.js → gb-action-panel_70.cjs.entry.js} +319 -121
- package/dist/cjs/gb-action-panel_70.cjs.entry.js.map +1 -0
- package/dist/cjs/gb-step-base.gb-step-icon-base.entry.cjs.js.map +1 -0
- package/dist/cjs/{gb-featured-icon_3.cjs.entry.js → gb-step-base_2.cjs.entry.js} +2 -27
- package/dist/cjs/gb-step-base_2.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-nav-bar/gb-nav-bar.js +102 -103
- package/dist/collection/components/gb-nav-bar/gb-nav-bar.js.map +1 -1
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js +18 -18
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/collection/components/gb-pattern/gb-pattern.js +7 -1
- package/dist/collection/components/gb-pattern/gb-pattern.js.map +1 -1
- package/dist/components/gb-empty-state.js +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js +17 -17
- package/dist/components/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/components/gb-nav-bar.js +101 -102
- package/dist/components/gb-nav-bar.js.map +1 -1
- package/dist/components/gb-pattern.js +1 -1
- package/dist/components/{p-COsrmQKW.js → p-BXkbbpUn.js} +8 -3
- package/dist/components/p-BXkbbpUn.js.map +1 -0
- package/dist/docs.json +3 -3
- package/dist/esm/{gb-action-panel_66.entry.js → gb-action-panel_70.entry.js} +316 -122
- package/dist/esm/gb-action-panel_70.entry.js.map +1 -0
- package/dist/esm/gb-step-base.gb-step-icon-base.entry.js.map +1 -0
- package/dist/esm/{gb-featured-icon_3.entry.js → gb-step-base_2.entry.js} +4 -28
- package/dist/esm/gb-step-base_2.entry.js.map +1 -0
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/gb-step-base.gb-step-icon-base.entry.esm.js.map +1 -0
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-b8c28f5b.entry.js → p-0692411f.entry.js} +2 -2
- package/dist/globuscomponents/p-0692411f.entry.js.map +1 -0
- package/dist/globuscomponents/p-544a9500.entry.js +2 -0
- package/dist/globuscomponents/{p-1b73d6ca.entry.js.map → p-544a9500.entry.js.map} +1 -1
- package/dist/types/components/gb-nav-bar/gb-nav-bar.d.ts +2 -1
- package/package.json +1 -1
- package/dist/cjs/gb-action-panel_66.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-empty-state.cjs.entry.js +0 -64
- package/dist/cjs/gb-empty-state.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-empty-state.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-featured-icon.gb-step-base.gb-step-icon-base.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-featured-icon_3.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-illustration.gb-pattern.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-illustration_2.cjs.entry.js +0 -121
- package/dist/cjs/gb-illustration_2.cjs.entry.js.map +0 -1
- package/dist/components/p-COsrmQKW.js.map +0 -1
- package/dist/esm/gb-action-panel_66.entry.js.map +0 -1
- package/dist/esm/gb-empty-state.entry.js +0 -62
- package/dist/esm/gb-empty-state.entry.js.map +0 -1
- package/dist/esm/gb-featured-icon.gb-step-base.gb-step-icon-base.entry.js.map +0 -1
- package/dist/esm/gb-featured-icon_3.entry.js.map +0 -1
- package/dist/esm/gb-illustration.gb-pattern.entry.js.map +0 -1
- package/dist/esm/gb-illustration_2.entry.js +0 -118
- package/dist/esm/gb-illustration_2.entry.js.map +0 -1
- package/dist/globuscomponents/gb-empty-state.entry.esm.js.map +0 -1
- package/dist/globuscomponents/gb-featured-icon.gb-step-base.gb-step-icon-base.entry.esm.js.map +0 -1
- package/dist/globuscomponents/gb-illustration.gb-pattern.entry.esm.js.map +0 -1
- package/dist/globuscomponents/p-18ee1c25.entry.js +0 -2
- package/dist/globuscomponents/p-18ee1c25.entry.js.map +0 -1
- package/dist/globuscomponents/p-1b73d6ca.entry.js +0 -2
- package/dist/globuscomponents/p-987f9da7.entry.js +0 -2
- package/dist/globuscomponents/p-987f9da7.entry.js.map +0 -1
- package/dist/globuscomponents/p-b8c28f5b.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;
|
|
@@ -123,9 +123,7 @@ export class GbNavBar {
|
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
onItemsChanged(newValue, _oldValue) {
|
|
126
|
-
console.log(newValue);
|
|
127
126
|
this.internalItems = [...newValue];
|
|
128
|
-
// console.log(this.internalItems);
|
|
129
127
|
setTimeout(() => {
|
|
130
128
|
this.calculateOverflow();
|
|
131
129
|
this.measured = true;
|
|
@@ -145,12 +143,14 @@ export class GbNavBar {
|
|
|
145
143
|
// }, 3000);
|
|
146
144
|
this.internalItems = this.items; // copy initial prop value safely
|
|
147
145
|
}
|
|
148
|
-
|
|
146
|
+
connectedCallback() {
|
|
147
|
+
window.addEventListener('resize', this.handleResize);
|
|
148
|
+
}
|
|
149
|
+
componentWillRender() {
|
|
149
150
|
setTimeout(() => {
|
|
150
151
|
this.calculateOverflow();
|
|
151
152
|
this.measured = true;
|
|
152
153
|
}, 0);
|
|
153
|
-
window.addEventListener('resize', this.handleResize);
|
|
154
154
|
}
|
|
155
155
|
disconnectedCallback() {
|
|
156
156
|
window.removeEventListener('resize', this.handleResize);
|
|
@@ -175,7 +175,6 @@ export class GbNavBar {
|
|
|
175
175
|
}
|
|
176
176
|
});
|
|
177
177
|
this.visibleItems = visible;
|
|
178
|
-
console.log(this.visibleItems);
|
|
179
178
|
this.overflowItems = hidden;
|
|
180
179
|
}
|
|
181
180
|
toggleDropdown() {
|
|
@@ -183,7 +182,7 @@ export class GbNavBar {
|
|
|
183
182
|
}
|
|
184
183
|
render() {
|
|
185
184
|
const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
|
|
186
|
-
return (h("div", { key: '
|
|
185
|
+
return (h("div", { key: '56acec89b538d433d0aeb1ba590b818e98224441', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '5e6d0b08671b93af5727aaba256c83ff415260f5', class: "pattern" }, h("img", { key: '967014fa31c2122978a81dd258e7adcadf7d2a3a', src: patternSrc, alt: "" }))), h("div", { key: '63323215e096be820cef7d6f134f421c7cb7a280', class: "top_bar_content" }, h("div", { key: '75335a9d39e2feb31fbe4969acad282e4c249541', 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: 'ffe12836480c6b37127ab0e7991755d77a70655c', 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: 'ff438d2e2d5961a5a255ea081d5030a842b32572', class: "more" }, h("gb-nav-bar-item", { key: '005b6e447b3de6347083eb4fa11c9009ae5c6de1', 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: '22cdb40ce98562361420dce9239b78a00bfb2bd6', 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
186
|
}
|
|
188
187
|
static get is() { return "gb-nav-bar"; }
|
|
189
188
|
static get encapsulation() { return "shadow"; }
|
|
@@ -240,7 +239,7 @@ export class GbNavBar {
|
|
|
240
239
|
},
|
|
241
240
|
"getter": false,
|
|
242
241
|
"setter": false,
|
|
243
|
-
"defaultValue": "[\r\n {\r\n
|
|
242
|
+
"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
243
|
},
|
|
245
244
|
"showBorder": {
|
|
246
245
|
"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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7G,MAAM,OAAO,QAAQ;IALrB;QAO2B,UAAK,GAAyE;QACrG,IAAI;QACJ,oBAAoB;QACpB,gCAAgC;QAChC,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,iCAAiC;QACjC,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,mCAAmC;QACnC,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,0CAA0C;QAC1C,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,gCAAgC;QAChC,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,gCAAgC;QAChC,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,qCAAqC;QACrC,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,eAAe;QACf,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,eAAe;QACf,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,eAAe;QACf,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,eAAe;QACf,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,eAAe;QACf,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,6BAA6B;QAC7B,qBAAqB;QACrB,eAAe;QACf,KAAK;SACN,CAAC;QACM,eAAU,GAAY,IAAI,CAAC;QACV,gBAAW,GAAW,CAAC,CAAC;QAExC,kBAAa,GAAyE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACtG,iBAAY,GAAsB,EAAE,CAAC;QACrC,kBAAa,GAAsB,EAAE,CAAC;QACtC,aAAQ,GAAY,KAAK,CAAC;QAC1B,iBAAY,GAAY,KAAK,CAAC;QAC9B,wBAAmB,GAAY,KAAK,CAAC;QA0CtC,iBAAY,GAAG,GAAG,EAAE;YAC1B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;KA+GH;IAxJC,gBAAgB,CAAC,KAAa,EAAE,OAAiB;QAC/C,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;QACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEnC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IAGD,cAAc,CAAC,QAA6E,EAAE,SAAS;QACrG,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;QAEnC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,EAAE,CAAC,CAAC,CAAC;QACN,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACvD,CAAC;IAED,iBAAiB;QACf,qBAAqB;QACrB,mBAAmB;QACnB,QAAQ;QACR,wBAAwB;QACxB,iCAAiC;QACjC,yBAAyB;QACzB,kBAAkB;QAClB,SAAS;QACT,OAAO;QACP,YAAY;QAEZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,iCAAiC;IACpE,CAAC;IAQD,iBAAiB;QACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACvD,CAAC;IAED,mBAAmB;QACjB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1D,CAAC;IAED,iBAAiB;QACf,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;QAC1F,IAAI,CAAC,eAAe;YAAE,OAAO;QAE7B,IAAI,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;QAClD,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAEjF,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACzB,MAAM,SAAS,GAAI,EAAkB,CAAC,WAAW,GAAG,EAAE,CAAC;YACvD,IAAI,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,GAAG,EAAE,CAAC;gBACjD,SAAS,IAAI,SAAS,CAAC;gBACvB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;YACrC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;IAC9B,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAE9D,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAC1E,IAAI,CAAC,QAAQ,KAAK,oBAAoB,IAAI,CACzC,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC3B,CACP;YACD,4DAAK,KAAK,EAAC,iBAAiB;gBAE1B,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,IAC/G,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7B,uBACE,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,eACjD,GAAG,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,KAAK,EAAE,GAAG,CAAC,KAAK,GACC,CACpB,CAAC,CACE;gBACN,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;oBAC1F,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACnE,uBACE,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,eACjD,GAAG,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,GAC9B,CACpB,CAAC;oBACD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CACjD,4DAAK,KAAK,EAAC,MAAM;wBACf,wEACE,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC3C,KAAK,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,GACnB;wBAClB,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7B,uCACE,IAAI,QACJ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,CAAC,IAAI,EACjB,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GACpB,CACpC,CAAC,CACE,CACP,CACG,CACP,CACG,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 this.internalItems = [...newValue];\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 connectedCallback() {\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n componentWillRender() {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\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 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"]}
|
|
@@ -5,22 +5,22 @@ export class GbNavBarSidemenu {
|
|
|
5
5
|
this.applicationIcon = '';
|
|
6
6
|
this.activeIndex = 0;
|
|
7
7
|
this.tabs = [
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
8
|
+
// {
|
|
9
|
+
// name: 'Accounts',
|
|
10
|
+
// index: 0,
|
|
11
|
+
// },
|
|
12
|
+
// {
|
|
13
|
+
// name: 'Transaction history lite',
|
|
14
|
+
// index: 1,
|
|
15
|
+
// },
|
|
16
|
+
// {
|
|
17
|
+
// name: 'TPP report',
|
|
18
|
+
// index: 1,
|
|
19
|
+
// },
|
|
20
|
+
// {
|
|
21
|
+
// name: 'Check dump history',
|
|
22
|
+
// index: 1,
|
|
23
|
+
// },
|
|
24
24
|
];
|
|
25
25
|
this.leadingIconSvg = '';
|
|
26
26
|
}
|
|
@@ -60,7 +60,7 @@ export class GbNavBarSidemenu {
|
|
|
60
60
|
// </div>
|
|
61
61
|
// </div>
|
|
62
62
|
// );
|
|
63
|
-
return (h("div", { key: '
|
|
63
|
+
return (h("div", { key: '577c99d8b34a180ff6354c933d166c4db1a65d36', class: "nav_bar_wrapper" }, h("gb-vertical-tabs", { key: '12b294bb9c74afa580fe48f3378401e87bef181e', class: "vertical_tabs", size: "sm", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) }), h("div", { key: 'dcc00b92c66fff3a353a4b071a581b5a8c50779a', class: "wrapper" }, h("div", { key: 'ab88b896fef66353f0bcd6e0ff02c814a293accb', class: "wrapper_pattern" }, h("img", { key: '804a22c65205d3505a475d32701f1a36de0d0fd8', src: patternSrc, alt: "" })), h("div", { key: '7e3d4a649a610d7d3dac3dd0ceea950fcd718e02', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("slot", { key: '2fc26aedd208623c4993f2554bbd95e58c1a26ff', name: "application_name" }))));
|
|
64
64
|
}
|
|
65
65
|
static get is() { return "gb-nav-bar-sidemenu"; }
|
|
66
66
|
static get encapsulation() { return "shadow"; }
|
|
@@ -152,7 +152,7 @@ export class GbNavBarSidemenu {
|
|
|
152
152
|
},
|
|
153
153
|
"getter": false,
|
|
154
154
|
"setter": false,
|
|
155
|
-
"defaultValue": "[\r\n {\r\n
|
|
155
|
+
"defaultValue": "[\r\n // {\r\n // name: 'Accounts',\r\n // index: 0,\r\n // },\r\n // {\r\n // name: 'Transaction history lite',\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 ]"
|
|
156
156
|
}
|
|
157
157
|
};
|
|
158
158
|
}
|
|
@@ -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;
|
|
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;QAChD,IAAI;QACJ,sBAAsB;QACtB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,sCAAsC;QACtC,cAAc;QACd,KAAK;QACL,IAAI;QACJ,wBAAwB;QACxB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,gCAAgC;QAChC,cAAc;QACd,KAAK;SACN,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 lite',\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"]}
|
|
@@ -32,7 +32,7 @@ export class GbPattern {
|
|
|
32
32
|
const gridDotDark = getAssetPath(`assets/empty_state_grid_dot_dark.svg`);
|
|
33
33
|
const squaresLight = getAssetPath(`assets/empty_state_squares_light.svg`);
|
|
34
34
|
const squaresDark = getAssetPath(`assets/empty_state_squares_dark.svg`);
|
|
35
|
-
return (h(Fragment, null, this.type === 'circles' && h("img", { key: '
|
|
35
|
+
return (h(Fragment, null, this.type === 'circles' && h("img", { key: '930cc4f06fc7912e4d87c857067841dccb33902d', src: this.isDarkTheme ? circlesDark : circlesLight, class: `pattern`, alt: "" }), this.type === 'grid' && h("img", { key: '2c08703c0b13ec70081c73e1eeb7498359ae2294', src: this.isDarkTheme ? gridDark : gridLight, class: `pattern`, alt: "" }), this.type === 'grid_dot' && h("img", { key: 'ada85cfd2fa71034f7de52604a733c351d9471fa', src: this.isDarkTheme ? gridDotDark : gridDotLight, class: `pattern`, alt: "" }), this.type === 'squares' && h("img", { key: 'ac889646f6d345d81d14d07616b751932ed5dab5', src: this.isDarkTheme ? squaresDark : squaresLight, class: `pattern`, alt: "" })));
|
|
36
36
|
}
|
|
37
37
|
static get is() { return "gb-pattern"; }
|
|
38
38
|
static get encapsulation() { return "shadow"; }
|
|
@@ -121,5 +121,11 @@ export class GbPattern {
|
|
|
121
121
|
}
|
|
122
122
|
};
|
|
123
123
|
}
|
|
124
|
+
static get watchers() {
|
|
125
|
+
return [{
|
|
126
|
+
"propName": "theme",
|
|
127
|
+
"methodName": "changeTheme"
|
|
128
|
+
}];
|
|
129
|
+
}
|
|
124
130
|
}
|
|
125
131
|
//# sourceMappingURL=gb-pattern.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-pattern.js","sourceRoot":"","sources":["../../../src/components/gb-pattern/gb-pattern.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"gb-pattern.js","sourceRoot":"","sources":["../../../src/components/gb-pattern/gb-pattern.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASlF,MAAM,OAAO,SAAS;IALtB;QAMU,SAAI,GAAiB,SAAS,CAAC;QAE/B,gBAAW,GAAY,KAAK,CAAC;KAwCtC;IArCC,WAAW;QACT,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,IAAI,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,EAAE,CAAC;gBAC9D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,YAAY,CAAC,sCAAsC,CAAC,CAAC;QACtE,MAAM,WAAW,GAAG,YAAY,CAAC,qCAAqC,CAAC,CAAC;QACxE,MAAM,SAAS,GAAG,YAAY,CAAC,mCAAmC,CAAC,CAAC;QACpE,MAAM,QAAQ,GAAG,YAAY,CAAC,kCAAkC,CAAC,CAAC;QAClE,MAAM,YAAY,GAAG,YAAY,CAAC,uCAAuC,CAAC,CAAC;QAC3E,MAAM,WAAW,GAAG,YAAY,CAAC,sCAAsC,CAAC,CAAC;QACzE,MAAM,YAAY,GAAG,YAAY,CAAC,sCAAsC,CAAC,CAAC;QAC1E,MAAM,WAAW,GAAG,YAAY,CAAC,qCAAqC,CAAC,CAAC;QAE5E,OAAO,CACL;YACG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,4DAAK,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG;YAC/G,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,4DAAK,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG;YACtG,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,4DAAK,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG;YAChH,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,4DAAK,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG,CAC/G,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, getAssetPath, h, Fragment, Watch } from \"@stencil/core\";\r\nimport { ThemeTypes } from \"../../components\";\r\nimport { PatternTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-pattern',\r\n styleUrl: 'gb-pattern.css',\r\n shadow: true,\r\n})\r\nexport class GbPattern {\r\n @Prop() type: PatternTypes = 'circles';\r\n @Prop() theme: ThemeTypes;\r\n @Prop() isDarkTheme: boolean = false;\r\n \r\n @Watch('theme')\r\n changeTheme() {\r\n if (this.theme === 'system') {\r\n if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n this.isDarkTheme = true;\r\n } else {\r\n this.isDarkTheme = false;\r\n }\r\n } else if (this.theme === 'light') {\r\n this.isDarkTheme = false;\r\n } else if (this.theme === 'dark') {\r\n this.isDarkTheme = true;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.changeTheme();\r\n }\r\n\r\n render() {\r\n const circlesLight = getAssetPath(`assets/empty_state_circles_light.svg`);\r\n const circlesDark = getAssetPath(`assets/empty_state_circles_dark.svg`);\r\n const gridLight = getAssetPath(`assets/empty_state_grid_light.svg`);\r\n const gridDark = getAssetPath(`assets/empty_state_grid_dark.svg`);\r\n const gridDotLight = getAssetPath(`assets/empty_state_grid_dot_light.svg`);\r\n const gridDotDark = getAssetPath(`assets/empty_state_grid_dot_dark.svg`);\r\n const squaresLight = getAssetPath(`assets/empty_state_squares_light.svg`);\r\n const squaresDark = getAssetPath(`assets/empty_state_squares_dark.svg`);\r\n\r\n return (\r\n <>\r\n {this.type === 'circles' && <img src={this.isDarkTheme ? circlesDark : circlesLight} class={`pattern`} alt=\"\" />}\r\n {this.type === 'grid' && <img src={this.isDarkTheme ? gridDark : gridLight} class={`pattern`} alt=\"\" />}\r\n {this.type === 'grid_dot' && <img src={this.isDarkTheme ? gridDotDark : gridDotLight} class={`pattern`} alt=\"\" />}\r\n {this.type === 'squares' && <img src={this.isDarkTheme ? squaresDark : squaresLight} class={`pattern`} alt=\"\" />}\r\n </>\r\n );\r\n }\r\n}"]}
|