globuswebcomponents 2.6.7 → 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.
Files changed (13) hide show
  1. package/dist/cjs/gb-action-panel_70.cjs.entry.js +97 -97
  2. package/dist/cjs/gb-action-panel_70.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/gb-nav-bar/gb-nav-bar.js +98 -98
  4. package/dist/collection/components/gb-nav-bar/gb-nav-bar.js.map +1 -1
  5. package/dist/components/gb-nav-bar.js +97 -97
  6. package/dist/components/gb-nav-bar.js.map +1 -1
  7. package/dist/docs.json +2 -2
  8. package/dist/esm/gb-action-panel_70.entry.js +97 -97
  9. package/dist/esm/gb-action-panel_70.entry.js.map +1 -1
  10. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  11. package/dist/globuscomponents/{p-bc3fce6c.entry.js → p-0692411f.entry.js} +2 -2
  12. package/dist/globuscomponents/{p-bc3fce6c.entry.js.map → p-0692411f.entry.js.map} +1 -1
  13. package/package.json +1 -1
package/dist/collection/components/gb-nav-bar/gb-nav-bar.js CHANGED
@@ -2,102 +2,102 @@ import { getAssetPath, h } from "@stencil/core";
2
2
  export class GbNavBar {
3
3
  constructor() {
4
4
  this.items = [
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
- },
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;
@@ -182,7 +182,7 @@ export class GbNavBar {
182
182
  }
183
183
  render() {
184
184
  const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
185
- return (h("div", { key: 'ba10c77cb587050355b7b22ce3b1d50e22ba9cb2', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '0928ca228ec2f2a03f03765ab233a56b8bee0a31', class: "pattern" }, h("img", { key: 'f52d324aeefc108a2f73c924a928594f014945ab', src: patternSrc, alt: "" }))), h("div", { key: '5681c50983d18bc29d71f32e3ae7dda2201e5687', class: "top_bar_content" }, h("div", { key: '1389382ace2d35c673d4b6380afcf003c0f1d95a', 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: 'fc496fc2437d48db253b82d14f9742b4d8d19bf4', 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: 'f2c1d101898c2b4ee85612508e41f8525c328e8b', class: "more" }, h("gb-nav-bar-item", { key: 'fa9c340a00920d89b86e366b0e53a02be3882ede', 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: '3889dd035c0787020ce1ecacff6f7d60fd7cf672', 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) })))))))))));
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) })))))))))));
186
186
  }
187
187
  static get is() { return "gb-nav-bar"; }
188
188
  static get encapsulation() { return "shadow"; }
@@ -239,7 +239,7 @@ export class GbNavBar {
239
239
  },
240
240
  "getter": false,
241
241
  "setter": false,
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 ]"
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 ]"
243
243
  },
244
244
  "showBorder": {
245
245
  "type": "boolean",
package/dist/collection/components/gb-nav-bar/gb-nav-bar.js.map CHANGED
@@ -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 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"]}
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 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"]}
package/dist/components/gb-nav-bar.js CHANGED
@@ -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
- 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
- },
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;
@@ -194,7 +194,7 @@ const GbNavBar$1 = /*@__PURE__*/ proxyCustomElement(class GbNavBar extends H {
194
194
  }
195
195
  render() {
196
196
  const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
197
- return (h("div", { key: 'ba10c77cb587050355b7b22ce3b1d50e22ba9cb2', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '0928ca228ec2f2a03f03765ab233a56b8bee0a31', class: "pattern" }, h("img", { key: 'f52d324aeefc108a2f73c924a928594f014945ab', src: patternSrc, alt: "" }))), h("div", { key: '5681c50983d18bc29d71f32e3ae7dda2201e5687', class: "top_bar_content" }, h("div", { key: '1389382ace2d35c673d4b6380afcf003c0f1d95a', 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: 'fc496fc2437d48db253b82d14f9742b4d8d19bf4', 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: 'f2c1d101898c2b4ee85612508e41f8525c328e8b', class: "more" }, h("gb-nav-bar-item", { key: 'fa9c340a00920d89b86e366b0e53a02be3882ede', 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: '3889dd035c0787020ce1ecacff6f7d60fd7cf672', 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) })))))))))));
197
+ 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) })))))))))));
198
198
  }
199
199
  get el() { return this; }
200
200
  static get watchers() { return {
package/dist/components/gb-nav-bar.js.map CHANGED
@@ -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 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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAiGtG;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;AA0CrC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,UAAU,CAAC,MAAK;gBACd,IAAI,CAAC,iBAAiB,EAAE;aACzB,EAAE,CAAC,CAAC;AACP,SAAC;AA+GF;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,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,QAAQ,CAAC;QAElC,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,iBAAiB,GAAA;QACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAGtD,mBAAmB,GAAA;QACjB,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,iBAAiB,EAAE;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;SACrB,EAAE,CAAC,CAAC;;IAGP,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,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 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"],"version":3}