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,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, g as getAssetPath, h } fr
|
|
|
2
2
|
import { d as defineCustomElement$6 } from './p-BUB7gwZu.js';
|
|
3
3
|
import { d as defineCustomElement$5 } from './p-DSJEFIpm.js';
|
|
4
4
|
import { d as defineCustomElement$4 } from './p-PdfPYE9v.js';
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-B2CfUeJe.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './p-Do0SJb1M.js';
|
|
7
7
|
|
|
8
8
|
const gbNavBarCss = ".top_bar_div{display:flex;width:100%;height:5rem;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;position:relative}.top_bar_div.border.plain_background{border-bottom:1px solid var(--color-border-subtler, #e3e8ef)}.top_bar_div.border.colored_background{border-bottom:1px solid var(--color-border-subtler, #e3e8ef)}.top_bar_div.colored_background{background:linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%)}.top_bar_div.plain_background{background:var(--color-surface)}.top_bar_content{display:flex;padding:0rem 2rem;justify-content:space-between;align-items:center;flex:1 0 0;align-self:stretch}.content{display:flex;align-items:center;gap:1rem;flex:1 0 0;overflow:hidden}.content.shown{overflow:visible}.pattern{position:absolute;top:0;width:100%;height:100%;overflow:hidden;mix-blend-mode:multiply}.more{position:relative}.dropdown_menu{position:absolute;top:112%;right:0;display:flex;width:fit-content;min-width:10rem;padding-right:var(--spacing-2);flex-direction:column;align-items:flex-start;align-items:stretch;border-radius:var(--rounded-sm);border:1px solid var(--color-border-subtler, #e3e8ef);background:var(--color-surface, #ffffff);box-shadow:var(--shadow-sm);position:absolute;gap:var(--spacing-none);transition:1s ease-in-out;z-index:9}";
|
|
@@ -14,102 +14,102 @@ const GbNavBar$1 = /*@__PURE__*/ proxyCustomElement(class GbNavBar extends H {
|
|
|
14
14
|
this.__attachShadow();
|
|
15
15
|
this.navBarItemClicked = createEvent(this, "navBarItemClicked");
|
|
16
16
|
this.items = [
|
|
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
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
17
|
+
{
|
|
18
|
+
label: 'First',
|
|
19
|
+
icon: 'assets/home-02.svg',
|
|
20
|
+
iconOnly: false,
|
|
21
|
+
index: 0,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: 'Second',
|
|
25
|
+
icon: 'assets/bank.svg',
|
|
26
|
+
iconOnly: false,
|
|
27
|
+
index: 1,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: 'Second',
|
|
31
|
+
icon: 'assets/money-02.svg',
|
|
32
|
+
iconOnly: false,
|
|
33
|
+
index: 2,
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: 'Second',
|
|
37
|
+
icon: 'assets/invoice-01.svg',
|
|
38
|
+
iconOnly: false,
|
|
39
|
+
index: 3,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: 'Second',
|
|
43
|
+
icon: 'assets/money-exchange-03.svg',
|
|
44
|
+
iconOnly: false,
|
|
45
|
+
index: 4,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: 'Second',
|
|
49
|
+
icon: 'assets/percent.svg',
|
|
50
|
+
iconOnly: false,
|
|
51
|
+
index: 5,
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: 'Second',
|
|
55
|
+
icon: 'assets/qr-code.svg',
|
|
56
|
+
iconOnly: false,
|
|
57
|
+
index: 6,
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: 'Second',
|
|
61
|
+
icon: 'assets/coins-dollar.svg',
|
|
62
|
+
iconOnly: false,
|
|
63
|
+
index: 7,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
label: 'Second',
|
|
67
|
+
icon: 'assets/star.svg',
|
|
68
|
+
iconOnly: false,
|
|
69
|
+
index: 8,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: 'Second',
|
|
73
|
+
icon: 'assets/star.svg',
|
|
74
|
+
iconOnly: false,
|
|
75
|
+
index: 9,
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
label: 'Second',
|
|
79
|
+
icon: 'assets/star.svg',
|
|
80
|
+
iconOnly: false,
|
|
81
|
+
index: 10,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label: 'Second',
|
|
85
|
+
icon: 'assets/star.svg',
|
|
86
|
+
iconOnly: false,
|
|
87
|
+
index: 11,
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
label: 'Second',
|
|
91
|
+
icon: 'assets/star.svg',
|
|
92
|
+
iconOnly: false,
|
|
93
|
+
index: 12,
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
label: 'Second',
|
|
97
|
+
icon: 'assets/star.svg',
|
|
98
|
+
iconOnly: false,
|
|
99
|
+
index: 13,
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
label: 'Second',
|
|
103
|
+
icon: 'assets/star.svg',
|
|
104
|
+
iconOnly: false,
|
|
105
|
+
index: 14,
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
label: 'Second',
|
|
109
|
+
icon: 'assets/star.svg',
|
|
110
|
+
iconOnly: false,
|
|
111
|
+
index: 15,
|
|
112
|
+
},
|
|
113
113
|
];
|
|
114
114
|
this.showBorder = true;
|
|
115
115
|
this.activeIndex = 0;
|
|
@@ -195,7 +195,7 @@ const GbNavBar$1 = /*@__PURE__*/ proxyCustomElement(class GbNavBar extends H {
|
|
|
195
195
|
}
|
|
196
196
|
render() {
|
|
197
197
|
const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
|
|
198
|
-
return (h("div", { key: '
|
|
198
|
+
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) })))))))))));
|
|
199
199
|
}
|
|
200
200
|
get el() { return this; }
|
|
201
201
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-nav-bar.js","mappings":"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","names":["GbNavBar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-nav-bar/gb-nav-bar.css?tag=gb-nav-bar&encapsulation=shadow","src/components/gb-nav-bar/gb-nav-bar.tsx"],"sourcesContent":[".top_bar_div {\r\n display: flex;\r\n width: 100%;\r\n height: 5rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n position: relative;\r\n}\r\n\r\n.top_bar_div.border.plain_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.border.colored_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.colored_background {\r\n background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);\r\n}\r\n\r\n.top_bar_div.plain_background {\r\n background: var(--color-surface);\r\n}\r\n\r\n.top_bar_content {\r\n display: flex;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n flex: 1 0 0;\r\n overflow: hidden;\r\n}\r\n\r\n.content.shown {\r\n overflow: visible;\r\n}\r\n\r\n.pattern {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.more {\r\n position: relative;\r\n}\r\n\r\n.dropdown_menu {\r\n position: absolute;\r\n top: 112%;\r\n right: 0;\r\n\r\n display: flex;\r\n width: fit-content;\r\n min-width: 10rem;\r\n padding-right: var(--spacing-2);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n z-index: 9;\r\n}\r\n","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"],"version":3}
|
|
1
|
+
{"file":"gb-nav-bar.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,uxCAAuxC;;MCQ9xCA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;;QAO2B,IAAA,CAAA,KAAK,GAAyE;AACrG,YAAA;AACE,gBAAA,KAAK,EAAE,OAAO;AACd,gBAAA,IAAI,EAAE,oBAAoB;AAC1B,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,qBAAqB;AAC3B,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,uBAAuB;AAC7B,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,8BAA8B;AACpC,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,oBAAoB;AAC1B,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,oBAAoB;AAC1B,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,yBAAyB;AAC/B,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,IAAI,EAAE,iBAAiB;AACvB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;SACF;AACO,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AACT,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;QAEvC,IAAA,CAAA,aAAa,GAAyE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;AACrG,QAAA,IAAY,CAAA,YAAA,GAAsB,EAAE;AACpC,QAAA,IAAa,CAAA,aAAA,GAAsB,EAAE;AACrC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAC7B,QAAA,IAAmB,CAAA,mBAAA,GAAY,KAAK;AA4CrC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,UAAU,CAAC,MAAK;gBACd,IAAI,CAAC,iBAAiB,EAAE;aACzB,EAAE,CAAC,CAAC;AACP,SAAC;AA6GF;IAxJC,gBAAgB,CAAC,KAAa,EAAE,OAAiB,EAAA;AAC/C,QAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;AAChC,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;QAElC,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;AAC/B,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;IAK7B,cAAc,CAAC,QAA6E,EAAE,SAAS,EAAA;AACrG,QAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;AACrB,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,QAAQ,CAAC;;QAGlC,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,iBAAiB,EAAE;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;SACrB,EAAE,CAAC,CAAC;QACL,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAGtD,iBAAiB,GAAA;;;;;;;;;;;QAYf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;;IASlC,gBAAgB,GAAA;QACd,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,iBAAiB,EAAE;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;SACrB,EAAE,CAAC,CAAC;QACL,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAGtD,oBAAoB,GAAA;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAGzD,iBAAiB,GAAA;AACf,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,+BAA+B,CAAC;AACzF,QAAA,IAAI,CAAC,eAAe;YAAE;AAEtB,QAAA,IAAI,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW;QACjD,IAAI,SAAS,GAAG,CAAC;QACjB,MAAM,OAAO,GAAG,EAAE;QAClB,MAAM,MAAM,GAAG,EAAE;AAEjB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;QAEhF,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACzB,YAAA,MAAM,SAAS,GAAI,EAAkB,CAAC,WAAW,GAAG,EAAE;YACtD,IAAI,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,GAAG,EAAE;gBAChD,SAAS,IAAI,SAAS;gBACtB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;;iBAC9B;gBACL,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;;AAEtC,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,YAAY,GAAG,OAAO;AAC3B,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;AAC9B,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM;;IAG7B,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;;IAGxC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,YAAY,CAAC,CAAA,0BAAA,CAA4B,CAAC;QAE7D,QACE,4DAAK,KAAK,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,QAAQ,CAAI,CAAA,EAAA,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAA,EAC1E,IAAI,CAAC,QAAQ,KAAK,oBAAoB,KACrC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,EAAG,CAAA,CAC3B,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAE1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,EAC/G,EAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KACzB,CAAA,CAAA,iBAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,SAAS,EAAA,WAAA,EACjD,GAAG,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,KAAK,EAAE,GAAG,CAAC,KAAK,EACC,CAAA,CACpB,CAAC,CACE,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,YAAY,GAAG,OAAO,GAAG,EAAE,CAAE,CAAA,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAA,EAC1F,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,GAAG,KAC/D,CACE,CAAA,iBAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,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,MAAM,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAA,CAC9B,CACpB,CAAC,EACD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,KAC7C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,mBAAmB,GAAG,QAAQ,GAAG,SAAS,EAC3C,WAAA,EAAA,KAAK,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACnB,CAAA,EAClB,IAAI,CAAC,YAAY,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACvB,EAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KACzB,CAAA,CAAA,iCAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,CAAC,IAAI,EACjB,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,EAAA,CACpB,CACpC,CAAC,CACE,CACP,CACG,CACP,CACG,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbNavBar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-nav-bar/gb-nav-bar.css?tag=gb-nav-bar&encapsulation=shadow","src/components/gb-nav-bar/gb-nav-bar.tsx"],"sourcesContent":[".top_bar_div {\r\n display: flex;\r\n width: 100%;\r\n height: 5rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n position: relative;\r\n}\r\n\r\n.top_bar_div.border.plain_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.border.colored_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.colored_background {\r\n background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);\r\n}\r\n\r\n.top_bar_div.plain_background {\r\n background: var(--color-surface);\r\n}\r\n\r\n.top_bar_content {\r\n display: flex;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n flex: 1 0 0;\r\n overflow: hidden;\r\n}\r\n\r\n.content.shown {\r\n overflow: visible;\r\n}\r\n\r\n.pattern {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.more {\r\n position: relative;\r\n}\r\n\r\n.dropdown_menu {\r\n position: absolute;\r\n top: 112%;\r\n right: 0;\r\n\r\n display: flex;\r\n width: fit-content;\r\n min-width: 10rem;\r\n padding-right: var(--spacing-2);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n z-index: 9;\r\n}\r\n","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"],"version":3}
|
|
@@ -6,9 +6,9 @@ import { d as defineCustomElement$h } from './p-ha2mgi_i.js';
|
|
|
6
6
|
import { d as defineCustomElement$g } from './p-BUB7gwZu.js';
|
|
7
7
|
import { d as defineCustomElement$f } from './p-DSJEFIpm.js';
|
|
8
8
|
import { d as defineCustomElement$e } from './p-bcUEPNaG.js';
|
|
9
|
-
import { d as defineCustomElement$d } from './p-
|
|
9
|
+
import { d as defineCustomElement$d } from './p-Ck4z413l.js';
|
|
10
10
|
import { d as defineCustomElement$c } from './p-C-BQpShI.js';
|
|
11
|
-
import { d as defineCustomElement$b } from './p-
|
|
11
|
+
import { d as defineCustomElement$b } from './p-CEE4M4bL.js';
|
|
12
12
|
import { d as defineCustomElement$a } from './p-DnMQaTyT.js';
|
|
13
13
|
import { d as defineCustomElement$9 } from './p-Ctk3jIQL.js';
|
|
14
14
|
import { d as defineCustomElement$8 } from './p-Dlfnel8C.js';
|
|
@@ -17,9 +17,9 @@ import { d as defineCustomElement$f } from './p-ChZmkybk.js';
|
|
|
17
17
|
import { d as defineCustomElement$e } from './p-D4ynT7a9.js';
|
|
18
18
|
import { d as defineCustomElement$d } from './p-CTELp0x3.js';
|
|
19
19
|
import { d as defineCustomElement$c } from './p-bcUEPNaG.js';
|
|
20
|
-
import { d as defineCustomElement$b } from './p-
|
|
20
|
+
import { d as defineCustomElement$b } from './p-Ck4z413l.js';
|
|
21
21
|
import { d as defineCustomElement$a } from './p-C-BQpShI.js';
|
|
22
|
-
import { d as defineCustomElement$9 } from './p-
|
|
22
|
+
import { d as defineCustomElement$9 } from './p-CEE4M4bL.js';
|
|
23
23
|
import { d as defineCustomElement$8 } from './p-Dlfnel8C.js';
|
|
24
24
|
import { d as defineCustomElement$7 } from './p-3j9Zttzj.js';
|
|
25
25
|
import { d as defineCustomElement$6 } from './p-CLsQgSL9.js';
|