globuswebcomponents 2.18.17 → 2.18.18

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 (14) hide show
  1. package/dist/cjs/gb-accordion-card_91.cjs.entry.js +103 -95
  2. package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.css +9 -0
  3. package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js +103 -95
  4. package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js.map +1 -1
  5. package/dist/components/gb-horizontal-tabs.js +103 -95
  6. package/dist/components/gb-horizontal-tabs.js.map +1 -1
  7. package/dist/docs.json +3 -3
  8. package/dist/esm/gb-accordion-card_91.entry.js +103 -95
  9. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  10. package/dist/globuscomponents/{p-1746afc7.entry.js → p-2200c6fa.entry.js} +2 -2
  11. package/dist/globuscomponents/p-2200c6fa.entry.js.map +1 -0
  12. package/dist/types/components.d.ts +2 -2
  13. package/package.json +1 -1
  14. package/dist/globuscomponents/p-1746afc7.entry.js.map +0 -1
package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js CHANGED
@@ -5,99 +5,99 @@ export class GbHorizontalTabs {
5
5
  this.badge = false;
6
6
  this.truncate = false;
7
7
  this.tabs = [
8
- {
9
- name: 'All accounts',
10
- index: 0,
11
- },
12
- {
13
- name: 'LCY Accounts',
14
- index: 1,
15
- badgeCount: '10',
16
- },
17
- {
18
- name: 'FCY',
19
- index: 1,
20
- badgeCount: '10',
21
- },
22
- {
23
- name: 'Second',
24
- index: 1,
25
- },
26
- {
27
- name: 'Second',
28
- index: 1,
29
- badgeCount: '10',
30
- },
31
- {
32
- name: 'Second',
33
- index: 1,
34
- badgeCount: '10',
35
- },
36
- {
37
- name: 'Second',
38
- index: 1,
39
- badgeCount: '10',
40
- },
41
- {
42
- name: 'Second',
43
- index: 1,
44
- badgeCount: '10',
45
- },
46
- {
47
- name: 'Second',
48
- index: 1,
49
- badgeCount: '10',
50
- },
51
- {
52
- name: 'Second',
53
- index: 1,
54
- badgeCount: '10',
55
- },
56
- {
57
- name: 'Second',
58
- index: 1,
59
- badgeCount: '10',
60
- },
61
- {
62
- name: 'Second',
63
- index: 1,
64
- badgeCount: '10',
65
- },
66
- {
67
- name: 'Second',
68
- index: 1,
69
- badgeCount: '10',
70
- },
71
- {
72
- name: 'Second',
73
- index: 1,
74
- badgeCount: '10',
75
- },
76
- {
77
- name: 'Second',
78
- index: 1,
79
- badgeCount: '10',
80
- },
81
- {
82
- name: 'Second',
83
- index: 1,
84
- badgeCount: '10',
85
- },
86
- {
87
- name: 'Second',
88
- index: 1,
89
- badgeCount: '10',
90
- },
91
- {
92
- name: 'Second',
93
- index: 1,
94
- badgeCount: '10',
95
- },
96
- {
97
- name: 'Second',
98
- index: 1,
99
- badgeCount: '10',
100
- },
8
+ // {
9
+ // name: 'All accounts',
10
+ // index: 0,
11
+ // },
12
+ // {
13
+ // name: 'LCY Accounts',
14
+ // index: 1,
15
+ // badgeCount: '10',
16
+ // },
17
+ // {
18
+ // name: 'FCY',
19
+ // index: 1,
20
+ // badgeCount: '10',
21
+ // },
22
+ // {
23
+ // name: 'Second',
24
+ // index: 1,
25
+ // },
26
+ // {
27
+ // name: 'Second',
28
+ // index: 1,
29
+ // badgeCount: '10',
30
+ // },
31
+ // {
32
+ // name: 'Second',
33
+ // index: 1,
34
+ // badgeCount: '10',
35
+ // },
36
+ // {
37
+ // name: 'Second',
38
+ // index: 1,
39
+ // badgeCount: '10',
40
+ // },
41
+ // {
42
+ // name: 'Second',
43
+ // index: 1,
44
+ // badgeCount: '10',
45
+ // },
46
+ // {
47
+ // name: 'Second',
48
+ // index: 1,
49
+ // badgeCount: '10',
50
+ // },
51
+ // {
52
+ // name: 'Second',
53
+ // index: 1,
54
+ // badgeCount: '10',
55
+ // },
56
+ // {
57
+ // name: 'Second',
58
+ // index: 1,
59
+ // badgeCount: '10',
60
+ // },
61
+ // {
62
+ // name: 'Second',
63
+ // index: 1,
64
+ // badgeCount: '10',
65
+ // },
66
+ // {
67
+ // name: 'Second',
68
+ // index: 1,
69
+ // badgeCount: '10',
70
+ // },
71
+ // {
72
+ // name: 'Second',
73
+ // index: 1,
74
+ // badgeCount: '10',
75
+ // },
76
+ // {
77
+ // name: 'Second',
78
+ // index: 1,
79
+ // badgeCount: '10',
80
+ // },
81
+ // {
82
+ // name: 'Second',
83
+ // index: 1,
84
+ // badgeCount: '10',
85
+ // },
86
+ // {
87
+ // name: 'Second',
88
+ // index: 1,
89
+ // badgeCount: '10',
90
+ // },
91
+ // {
92
+ // name: 'Second',
93
+ // index: 1,
94
+ // badgeCount: '10',
95
+ // },
96
+ // {
97
+ // name: 'Second',
98
+ // index: 1,
99
+ // badgeCount: '10',
100
+ // },
101
101
  ];
102
102
  this.internalTabs = [...this.tabs];
103
103
  this.internalActiveIndex = 0;
@@ -184,6 +184,14 @@ export class GbHorizontalTabs {
184
184
  }
185
185
  onTabsChanged(newTabs) {
186
186
  this.internalTabs = newTabs;
187
+ // `tabs` is very commonly set after mount (e.g. loaded from an API), so
188
+ // the overflow check needs to re-run once the new tabs have actually
189
+ // rendered - not just at componentDidLoad. Double rAF: one frame for
190
+ // Stencil to commit the internalTabs re-render, another so layout (and
191
+ // scrollWidth) has settled before measuring.
192
+ requestAnimationFrame(() => {
193
+ requestAnimationFrame(() => this.updateScrollButtons());
194
+ });
187
195
  }
188
196
  componentWillLoad() {
189
197
  this.internalTabs = this.tabs;
@@ -196,7 +204,7 @@ export class GbHorizontalTabs {
196
204
  this.tabItemClicked.emit(index);
197
205
  }
198
206
  render() {
199
- return (h("div", { key: 'ce733feefaa8215ce347a990e9b1dc845325875d', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'f92af93d897ed16e47660dd3462fc125be94e85c', class: "scroll_button_div left" }, h("div", { key: '5b86c153f3392df41761b7ce7c2e2443fcd7799d', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: '667dd8f67046dcdb545d4ed31b72e042df819f65', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '3c5a80fb5eeabf89590c6b05730d4028f1563c80', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '61684fd0d7ea3c54e68dafbe052e223e6ee68f4c', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '820110dda9898f28f1bf1709e262f9192beabe0b', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, truncate: this.truncate, badge: tab.badgeCount ? true : !tab.badgeCount ? false : this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: '764712fea702d1998797048e7e9b50dc90cd90e3', class: "scroll_button_div right" }, h("div", { key: '25b885c20f1690536670ebda8147c4873cb2a02f', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: 'ae75464a1f2df4802dd0186a99d1566a776a729d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '95fd64a04c0fa7d6d3a03eb8f570a09139916e48', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
207
+ return (h("div", { key: 'd38105b5f3fa2ae133ce3714eb4d7f95dd669bd2', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'af099e119057fd042026d6ca7ae41dc144f85c25', class: "scroll_button_div left" }, h("div", { key: '520bc13879c76f6a1b459cfa6bbbd664cdc5a73c', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'ea94ee2feb0d7296b1e102d6194e3e78c26235b3', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '48195e0efdd0833614819d0a2ee2d20027643aff', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '48e5c5de4b497a5559cc7ba687dc9c71864aeee8', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'f519e7b1a7714d145b8dddc0c53eaceba913a6fd', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, truncate: this.truncate, badge: tab.badgeCount ? true : !tab.badgeCount ? false : this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: '9259943c2ae1cb9d5f3570c8aa6e160c15a9a54f', class: "scroll_button_div right" }, h("div", { key: '049c7085eb81a456df7392972de6b4b25732699c', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '2e5151c39eb44355de85ef0321396e8a9d4d7085', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'f0667985bd38a229bd6e4e4a623a330750b108fd', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
200
208
  }
201
209
  static get is() { return "gb-horizontal-tabs"; }
202
210
  static get encapsulation() { return "shadow"; }
@@ -357,7 +365,7 @@ export class GbHorizontalTabs {
357
365
  },
358
366
  "getter": false,
359
367
  "setter": false,
360
- "defaultValue": "[\n {\n name: 'All accounts',\n index: 0,\n },\n {\n name: 'LCY Accounts',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'FCY',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n ]"
368
+ "defaultValue": "[\n // {\n // name: 'All accounts',\n // index: 0,\n // },\n // {\n // name: 'LCY Accounts',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'FCY',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n ]"
361
369
  }
362
370
  };
363
371
  }
package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\n\n@Component({\n tag: 'gb-horizontal-tabs',\n styleUrl: 'gb-horizontal-tabs.css',\n shadow: true,\n})\nexport class GbHorizontalTabs {\n @Prop() type: TabTypes;\n @Prop() size: GeneralSizes;\n @Prop() fullWidth: boolean = false;\n @Prop() badge: boolean = false;\n @Prop() truncate: boolean = false;\n @Prop({ mutable: true }) activeIndex: number;\n @Prop() tabs: { name: string; index: number; badgeCount?: string }[] = [\n {\n name: 'All accounts',\n index: 0,\n },\n {\n name: 'LCY Accounts',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'FCY',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n {\n name: 'Second',\n index: 1,\n badgeCount: '10',\n },\n ];\n @State() internalTabs: { name: string; index: number; badgeCount?: string }[] = [...this.tabs];\n @State() internalActiveIndex: number = 0;\n // @State() showScrollButtons: boolean = false;\n @State() width: number = window.innerWidth;\n @Event() tabItemClicked: EventEmitter<number>;\n @State() showLeftButton = false;\n @State() showRightButton = false;\n private tabContainer!: HTMLElement;\n private touchStartX: number = 0;\n private touchEndX: number = 0;\n private mouseStartX: number = 0;\n private isMouseDown: boolean = false;\n\n componentDidLoad() {\n this.updateScrollButtons();\n }\n\n scrollLeft() {\n this.tabContainer.scrollBy({ left: -200, behavior: 'smooth' });\n }\n\n scrollRight() {\n this.tabContainer.scrollBy({ left: 200, behavior: 'smooth' });\n }\n\n handleScroll() {\n this.updateScrollButtons();\n }\n\n handleTouchStart(e: TouchEvent) {\n this.touchStartX = e.touches[0].clientX;\n }\n\n handleTouchEnd(e: TouchEvent) {\n this.touchEndX = e.changedTouches[0].clientX;\n this.handleSwipe();\n }\n\n handleSwipe() {\n const swipeThreshold = 50; // minimum distance for a swipe\n const diff = this.touchStartX - this.touchEndX;\n\n if (Math.abs(diff) > swipeThreshold) {\n if (diff > 0) {\n // Swiped left, scroll right\n this.scrollRight();\n } else {\n // Swiped right, scroll left\n this.scrollLeft();\n }\n }\n }\n\n handleMouseDown(e: MouseEvent) {\n this.isMouseDown = true;\n this.mouseStartX = e.clientX;\n }\n\n handleMouseUp(e: MouseEvent) {\n if (!this.isMouseDown) return;\n this.isMouseDown = false;\n const mouseEndX = e.clientX;\n const swipeThreshold = 50;\n const diff = this.mouseStartX - mouseEndX;\n\n if (Math.abs(diff) > swipeThreshold) {\n if (diff > 0) {\n // Dragged left, scroll right\n this.scrollRight();\n } else {\n // Dragged right, scroll left\n this.scrollLeft();\n }\n }\n }\n\n handleMouseLeave() {\n this.isMouseDown = false;\n }\n\n @Listen('resize', { target: 'window' })\n updateScrollButtons() {\n if (!this.tabContainer) return;\n\n // Read current viewport width so behavior updates dynamically on resize\n this.width = window.innerWidth;\n\n const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;\n\n // Only show buttons if overflow exists and the width greater than 768px for screens larger than mobile\n const isOverflowing = scrollWidth > clientWidth;\n this.showLeftButton = isOverflowing && scrollLeft > 0;\n this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;\n }\n\n @Watch('activeIndex')\n setActiveIndex(_oldValue: number, newValue: number) {\n this.internalActiveIndex = newValue;\n }\n\n @Watch('tabs')\n onTabsChanged(newTabs: { name: string; index: number; badgeCount?: string }[]) {\n this.internalTabs = newTabs;\n }\n\n componentWillLoad() {\n this.internalTabs = this.tabs;\n }\n\n componentWillRender() {\n this.internalActiveIndex = this.activeIndex;\n }\n\n async handleTabClick(index: number) {\n this.activeIndex = index;\n this.tabItemClicked.emit(index);\n }\n\n render() {\n return (\n <div class={`horizontal_tab_div_wrapper ${this.type}`}>\n {this.showLeftButton && (\n <div class=\"scroll_button_div left\">\n <div class=\"scroll_button\" onClick={() => this.scrollLeft()}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18\"\n stroke=\"var(--color-icon, #4B5565)\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n )}\n <div\n class=\"horizontal_tab_wrapper\"\n ref={el => (this.tabContainer = el as HTMLElement)}\n onScroll={() => this.handleScroll()}\n onTouchStart={e => this.handleTouchStart(e)}\n onTouchEnd={e => this.handleTouchEnd(e)}\n onMouseDown={e => this.handleMouseDown(e)}\n onMouseUp={e => this.handleMouseUp(e)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\n {this.internalTabs.map((tab, index) => (\n <gb-tab-button-base\n class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\n size={this.size}\n full-width={this.fullWidth}\n type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\n onClick={() => this.handleTabClick(index)}\n current={this.internalActiveIndex === index}\n tab-name={tab.name}\n truncate={this.truncate}\n badge={tab.badgeCount ? true : !tab.badgeCount ? false : this.badge}\n alignment=\"horizontal\"\n >\n <p slot=\"count\">{tab.badgeCount}</p>\n </gb-tab-button-base>\n ))}\n </div>\n </div>\n {this.showRightButton && (\n <div class=\"scroll_button_div right\">\n <div class=\"scroll_button\" onClick={() => this.scrollRight()}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18\"\n stroke=\"var(--color-icon, #4B5565)\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\n\n@Component({\n tag: 'gb-horizontal-tabs',\n styleUrl: 'gb-horizontal-tabs.css',\n shadow: true,\n})\nexport class GbHorizontalTabs {\n @Prop() type: TabTypes;\n @Prop() size: GeneralSizes;\n @Prop() fullWidth: boolean = false;\n @Prop() badge: boolean = false;\n @Prop() truncate: boolean = false;\n @Prop({ mutable: true }) activeIndex: number;\n @Prop() tabs: { name: string; index: number; badgeCount?: string }[] = [\n // {\n // name: 'All accounts',\n // index: 0,\n // },\n // {\n // name: 'LCY Accounts',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'FCY',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n // {\n // name: 'Second',\n // index: 1,\n // badgeCount: '10',\n // },\n ];\n @State() internalTabs: { name: string; index: number; badgeCount?: string }[] = [...this.tabs];\n @State() internalActiveIndex: number = 0;\n // @State() showScrollButtons: boolean = false;\n @State() width: number = window.innerWidth;\n @Event() tabItemClicked: EventEmitter<number>;\n @State() showLeftButton = false;\n @State() showRightButton = false;\n private tabContainer!: HTMLElement;\n private touchStartX: number = 0;\n private touchEndX: number = 0;\n private mouseStartX: number = 0;\n private isMouseDown: boolean = false;\n\n componentDidLoad() {\n this.updateScrollButtons();\n }\n\n scrollLeft() {\n this.tabContainer.scrollBy({ left: -200, behavior: 'smooth' });\n }\n\n scrollRight() {\n this.tabContainer.scrollBy({ left: 200, behavior: 'smooth' });\n }\n\n handleScroll() {\n this.updateScrollButtons();\n }\n\n handleTouchStart(e: TouchEvent) {\n this.touchStartX = e.touches[0].clientX;\n }\n\n handleTouchEnd(e: TouchEvent) {\n this.touchEndX = e.changedTouches[0].clientX;\n this.handleSwipe();\n }\n\n handleSwipe() {\n const swipeThreshold = 50; // minimum distance for a swipe\n const diff = this.touchStartX - this.touchEndX;\n\n if (Math.abs(diff) > swipeThreshold) {\n if (diff > 0) {\n // Swiped left, scroll right\n this.scrollRight();\n } else {\n // Swiped right, scroll left\n this.scrollLeft();\n }\n }\n }\n\n handleMouseDown(e: MouseEvent) {\n this.isMouseDown = true;\n this.mouseStartX = e.clientX;\n }\n\n handleMouseUp(e: MouseEvent) {\n if (!this.isMouseDown) return;\n this.isMouseDown = false;\n const mouseEndX = e.clientX;\n const swipeThreshold = 50;\n const diff = this.mouseStartX - mouseEndX;\n\n if (Math.abs(diff) > swipeThreshold) {\n if (diff > 0) {\n // Dragged left, scroll right\n this.scrollRight();\n } else {\n // Dragged right, scroll left\n this.scrollLeft();\n }\n }\n }\n\n handleMouseLeave() {\n this.isMouseDown = false;\n }\n\n @Listen('resize', { target: 'window' })\n updateScrollButtons() {\n if (!this.tabContainer) return;\n\n // Read current viewport width so behavior updates dynamically on resize\n this.width = window.innerWidth;\n\n const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;\n\n // Only show buttons if overflow exists and the width greater than 768px for screens larger than mobile\n const isOverflowing = scrollWidth > clientWidth;\n this.showLeftButton = isOverflowing && scrollLeft > 0;\n this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;\n }\n\n @Watch('activeIndex')\n setActiveIndex(_oldValue: number, newValue: number) {\n this.internalActiveIndex = newValue;\n }\n\n @Watch('tabs')\n onTabsChanged(newTabs: { name: string; index: number; badgeCount?: string }[]) {\n this.internalTabs = newTabs;\n\n // `tabs` is very commonly set after mount (e.g. loaded from an API), so\n // the overflow check needs to re-run once the new tabs have actually\n // rendered - not just at componentDidLoad. Double rAF: one frame for\n // Stencil to commit the internalTabs re-render, another so layout (and\n // scrollWidth) has settled before measuring.\n requestAnimationFrame(() => {\n requestAnimationFrame(() => this.updateScrollButtons());\n });\n }\n\n componentWillLoad() {\n this.internalTabs = this.tabs;\n }\n\n componentWillRender() {\n this.internalActiveIndex = this.activeIndex;\n }\n\n async handleTabClick(index: number) {\n this.activeIndex = index;\n this.tabItemClicked.emit(index);\n }\n\n render() {\n return (\n <div class={`horizontal_tab_div_wrapper ${this.type}`}>\n {this.showLeftButton && (\n <div class=\"scroll_button_div left\">\n <div class=\"scroll_button\" onClick={() => this.scrollLeft()}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18\"\n stroke=\"var(--color-icon, #4B5565)\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n )}\n <div\n class=\"horizontal_tab_wrapper\"\n ref={el => (this.tabContainer = el as HTMLElement)}\n onScroll={() => this.handleScroll()}\n onTouchStart={e => this.handleTouchStart(e)}\n onTouchEnd={e => this.handleTouchEnd(e)}\n onMouseDown={e => this.handleMouseDown(e)}\n onMouseUp={e => this.handleMouseUp(e)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\n {this.internalTabs.map((tab, index) => (\n <gb-tab-button-base\n class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\n size={this.size}\n full-width={this.fullWidth}\n type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\n onClick={() => this.handleTabClick(index)}\n current={this.internalActiveIndex === index}\n tab-name={tab.name}\n truncate={this.truncate}\n badge={tab.badgeCount ? true : !tab.badgeCount ? false : this.badge}\n alignment=\"horizontal\"\n >\n <p slot=\"count\">{tab.badgeCount}</p>\n </gb-tab-button-base>\n ))}\n </div>\n </div>\n {this.showRightButton && (\n <div class=\"scroll_button_div right\">\n <div class=\"scroll_button\" onClick={() => this.scrollRight()}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18\"\n stroke=\"var(--color-icon, #4B5565)\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n"]}