globuswebcomponents 2.18.16 → 2.18.17
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-accordion-card_91.cjs.entry.js +96 -96
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.css +18 -6
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js +95 -95
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js.map +1 -1
- package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.css +16 -1
- package/dist/components/gb-horizontal-tabs.js +96 -96
- package/dist/components/gb-horizontal-tabs.js.map +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js +2 -2
- package/dist/components/gb-tab-button-base.js +1 -1
- package/dist/components/gb-vertical-tabs.js +1 -1
- package/dist/components/{p-Mn65KR2i.js → p-BVbNU6iF.js} +3 -3
- package/dist/components/{p-Mn65KR2i.js.map → p-BVbNU6iF.js.map} +1 -1
- package/dist/components/{p-BwyyuzDn.js → p-DkZlNK1X.js} +3 -3
- package/dist/components/p-DkZlNK1X.js.map +1 -0
- package/dist/docs.json +3 -3
- package/dist/esm/gb-accordion-card_91.entry.js +96 -96
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-ec2476be.entry.js → p-1746afc7.entry.js} +2 -2
- package/dist/globuscomponents/p-1746afc7.entry.js.map +1 -0
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
- package/dist/components/p-BwyyuzDn.js.map +0 -1
- package/dist/globuscomponents/p-ec2476be.entry.js.map +0 -1
|
@@ -2772,7 +2772,17 @@
|
|
|
2772
2772
|
display: flex;
|
|
2773
2773
|
justify-content: flex-start;
|
|
2774
2774
|
gap: var(--spacing-4);
|
|
2775
|
-
width
|
|
2775
|
+
/* Sized to fit all the tabs at their natural (nowrap) width, not capped to
|
|
2776
|
+
* the scrollable wrapper's width - that's what lets it grow wider than the
|
|
2777
|
+
* wrapper so scrollWidth > clientWidth and the scroll buttons/overflow
|
|
2778
|
+
* detection actually have something to trigger on. full_width below
|
|
2779
|
+
* re-pins it to 100% since that variant deliberately has no overflow. */
|
|
2780
|
+
width: -moz-max-content;
|
|
2781
|
+
width: max-content;
|
|
2782
|
+
/* It's also a flex item of .horizontal_tab_wrapper - without this, the
|
|
2783
|
+
* default flex-shrink:1 would squeeze it back down to fit, undoing the
|
|
2784
|
+
* width above and silently preventing any overflow/scrolling. */
|
|
2785
|
+
flex-shrink: 0;
|
|
2776
2786
|
}
|
|
2777
2787
|
/* Tab Type Styles */
|
|
2778
2788
|
.horizontal_tab_div.underline,
|
|
@@ -2793,6 +2803,7 @@
|
|
|
2793
2803
|
}
|
|
2794
2804
|
/* Full Width Styles */
|
|
2795
2805
|
.horizontal_tab_div.full_width {
|
|
2806
|
+
width: 100%;
|
|
2796
2807
|
justify-content: space-between;
|
|
2797
2808
|
}
|
|
2798
2809
|
.horizontal_tab_div.button_primary,
|
|
@@ -2808,27 +2819,28 @@
|
|
|
2808
2819
|
}
|
|
2809
2820
|
.scroll_button_div {
|
|
2810
2821
|
display: flex;
|
|
2811
|
-
/* height
|
|
2822
|
+
/* Fills the tab row's actual height instead of a fixed value, so it stays
|
|
2823
|
+
* correctly centered whatever the row's height ends up being (it varies by
|
|
2824
|
+
* `size` and `type`) rather than only matching one specific size. */
|
|
2825
|
+
height: 100%;
|
|
2812
2826
|
justify-content: center;
|
|
2813
2827
|
align-items: center;
|
|
2814
2828
|
gap: 0.5rem;
|
|
2815
2829
|
top: 0;
|
|
2816
2830
|
position: absolute;
|
|
2817
2831
|
z-index: 9;
|
|
2832
|
+
/* No fixed width - it's sized by its own padding/content below, on both
|
|
2833
|
+
* sides, so it adapts instead of clipping/gapping at other paddings. */
|
|
2818
2834
|
}
|
|
2819
2835
|
.scroll_button_div.left {
|
|
2820
2836
|
left: 0;
|
|
2821
2837
|
background: linear-gradient(90deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
|
|
2822
2838
|
padding: 0.1rem 2rem 0.1rem 0.5rem;
|
|
2823
|
-
/* width: 2rem;
|
|
2824
|
-
height: 100%; */
|
|
2825
2839
|
}
|
|
2826
2840
|
.scroll_button_div.right {
|
|
2827
2841
|
background: linear-gradient(270deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
|
|
2828
2842
|
padding: 0.1rem 0.5rem 0.1rem 2rem;
|
|
2829
2843
|
right: 0;
|
|
2830
|
-
width: 1.5rem;
|
|
2831
|
-
height: 100%;
|
|
2832
2844
|
}
|
|
2833
2845
|
.scroll_button {
|
|
2834
2846
|
display: flex;
|
|
@@ -5,99 +5,99 @@ export class GbHorizontalTabs {
|
|
|
5
5
|
this.badge = false;
|
|
6
6
|
this.truncate = false;
|
|
7
7
|
this.tabs = [
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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;
|
|
@@ -196,7 +196,7 @@ export class GbHorizontalTabs {
|
|
|
196
196
|
this.tabItemClicked.emit(index);
|
|
197
197
|
}
|
|
198
198
|
render() {
|
|
199
|
-
return (h("div", { key: '
|
|
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" })))))));
|
|
200
200
|
}
|
|
201
201
|
static get is() { return "gb-horizontal-tabs"; }
|
|
202
202
|
static get encapsulation() { return "shadow"; }
|
|
@@ -357,7 +357,7 @@ export class GbHorizontalTabs {
|
|
|
357
357
|
},
|
|
358
358
|
"getter": false,
|
|
359
359
|
"setter": false,
|
|
360
|
-
"defaultValue": "[\n
|
|
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 ]"
|
|
361
361
|
}
|
|
362
362
|
};
|
|
363
363
|
}
|
|
@@ -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\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"]}
|
|
@@ -2749,6 +2749,10 @@
|
|
|
2749
2749
|
} */
|
|
2750
2750
|
:host{
|
|
2751
2751
|
display: flex;
|
|
2752
|
+
/* Centers .tab_button_div within the host box when full_width has grown
|
|
2753
|
+
* the host wider than its content (see below) - a no-op otherwise, since
|
|
2754
|
+
* the host is already content-sized when it hasn't grown. */
|
|
2755
|
+
justify-content: center;
|
|
2752
2756
|
}
|
|
2753
2757
|
.tab_button_div{
|
|
2754
2758
|
display: flex;
|
|
@@ -2760,6 +2764,15 @@
|
|
|
2760
2764
|
.tab_button_div.truncate{
|
|
2761
2765
|
min-width: 0;
|
|
2762
2766
|
}
|
|
2767
|
+
.tab_button_div.full_width:not(.truncate){
|
|
2768
|
+
/* full_width makes the *host* grow to share the row equally (see
|
|
2769
|
+
* .tab_button_base.full_width in gb-horizontal-tabs.css); this div's own
|
|
2770
|
+
* background (e.g. the rounded "current" pill) should still hug just its
|
|
2771
|
+
* own text/badge, centered in that space, rather than stretching to fill
|
|
2772
|
+
* the whole grown host. Skipped when truncate is also set - that needs a
|
|
2773
|
+
* bounded width to know when to ellipsize. */
|
|
2774
|
+
width: auto;
|
|
2775
|
+
}
|
|
2763
2776
|
.tab_button_div.horizontal{
|
|
2764
2777
|
justify-content: center;
|
|
2765
2778
|
align-items: center;
|
|
@@ -2774,10 +2787,12 @@
|
|
|
2774
2787
|
.tab_button_div.truncate .tab_name_wrapper{
|
|
2775
2788
|
flex: 1;
|
|
2776
2789
|
}
|
|
2790
|
+
.tab_name{
|
|
2791
|
+
white-space: nowrap;
|
|
2792
|
+
}
|
|
2777
2793
|
.tab_name.truncate{
|
|
2778
2794
|
width: 100%;
|
|
2779
2795
|
overflow: hidden;
|
|
2780
|
-
white-space: nowrap;
|
|
2781
2796
|
text-overflow: ellipsis;
|
|
2782
2797
|
}
|
|
2783
2798
|
.tab_text{
|