globuswebcomponents 2.18.16 → 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.
- package/dist/cjs/gb-accordion-card_91.cjs.entry.js +11 -3
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.css +27 -6
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js +9 -1
- 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 +11 -3
- 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 +1 -1
- package/dist/esm/gb-accordion-card_91.entry.js +11 -3
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-ec2476be.entry.js → p-2200c6fa.entry.js} +2 -2
- package/dist/globuscomponents/p-2200c6fa.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/p-BwyyuzDn.js.map +0 -1
- package/dist/globuscomponents/p-ec2476be.entry.js.map +0 -1
|
@@ -2747,6 +2747,15 @@
|
|
|
2747
2747
|
#slotted_button_text.link_color.default.destructive {
|
|
2748
2748
|
color: var(--color-text-danger, #b51726) !important;
|
|
2749
2749
|
} */
|
|
2750
|
+
:host {
|
|
2751
|
+
/* Without this the host defaults to display:inline, so the width:100% below
|
|
2752
|
+
* has no real containing block to resolve against - consuming apps
|
|
2753
|
+
* shouldn't need to wrap this in a sized container just to make the
|
|
2754
|
+
* overflow/scroll-button math work. */
|
|
2755
|
+
display: block;
|
|
2756
|
+
width: 100%;
|
|
2757
|
+
min-width: 0;
|
|
2758
|
+
}
|
|
2750
2759
|
.horizontal_tab_div_wrapper {
|
|
2751
2760
|
width: 100%;
|
|
2752
2761
|
overflow-x: auto;
|
|
@@ -2772,7 +2781,17 @@
|
|
|
2772
2781
|
display: flex;
|
|
2773
2782
|
justify-content: flex-start;
|
|
2774
2783
|
gap: var(--spacing-4);
|
|
2775
|
-
width
|
|
2784
|
+
/* Sized to fit all the tabs at their natural (nowrap) width, not capped to
|
|
2785
|
+
* the scrollable wrapper's width - that's what lets it grow wider than the
|
|
2786
|
+
* wrapper so scrollWidth > clientWidth and the scroll buttons/overflow
|
|
2787
|
+
* detection actually have something to trigger on. full_width below
|
|
2788
|
+
* re-pins it to 100% since that variant deliberately has no overflow. */
|
|
2789
|
+
width: -moz-max-content;
|
|
2790
|
+
width: max-content;
|
|
2791
|
+
/* It's also a flex item of .horizontal_tab_wrapper - without this, the
|
|
2792
|
+
* default flex-shrink:1 would squeeze it back down to fit, undoing the
|
|
2793
|
+
* width above and silently preventing any overflow/scrolling. */
|
|
2794
|
+
flex-shrink: 0;
|
|
2776
2795
|
}
|
|
2777
2796
|
/* Tab Type Styles */
|
|
2778
2797
|
.horizontal_tab_div.underline,
|
|
@@ -2793,6 +2812,7 @@
|
|
|
2793
2812
|
}
|
|
2794
2813
|
/* Full Width Styles */
|
|
2795
2814
|
.horizontal_tab_div.full_width {
|
|
2815
|
+
width: 100%;
|
|
2796
2816
|
justify-content: space-between;
|
|
2797
2817
|
}
|
|
2798
2818
|
.horizontal_tab_div.button_primary,
|
|
@@ -2808,27 +2828,28 @@
|
|
|
2808
2828
|
}
|
|
2809
2829
|
.scroll_button_div {
|
|
2810
2830
|
display: flex;
|
|
2811
|
-
/* height
|
|
2831
|
+
/* Fills the tab row's actual height instead of a fixed value, so it stays
|
|
2832
|
+
* correctly centered whatever the row's height ends up being (it varies by
|
|
2833
|
+
* `size` and `type`) rather than only matching one specific size. */
|
|
2834
|
+
height: 100%;
|
|
2812
2835
|
justify-content: center;
|
|
2813
2836
|
align-items: center;
|
|
2814
2837
|
gap: 0.5rem;
|
|
2815
2838
|
top: 0;
|
|
2816
2839
|
position: absolute;
|
|
2817
2840
|
z-index: 9;
|
|
2841
|
+
/* No fixed width - it's sized by its own padding/content below, on both
|
|
2842
|
+
* sides, so it adapts instead of clipping/gapping at other paddings. */
|
|
2818
2843
|
}
|
|
2819
2844
|
.scroll_button_div.left {
|
|
2820
2845
|
left: 0;
|
|
2821
2846
|
background: linear-gradient(90deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
|
|
2822
2847
|
padding: 0.1rem 2rem 0.1rem 0.5rem;
|
|
2823
|
-
/* width: 2rem;
|
|
2824
|
-
height: 100%; */
|
|
2825
2848
|
}
|
|
2826
2849
|
.scroll_button_div.right {
|
|
2827
2850
|
background: linear-gradient(270deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
|
|
2828
2851
|
padding: 0.1rem 0.5rem 0.1rem 2rem;
|
|
2829
2852
|
right: 0;
|
|
2830
|
-
width: 1.5rem;
|
|
2831
|
-
height: 100%;
|
|
2832
2853
|
}
|
|
2833
2854
|
.scroll_button {
|
|
2834
2855
|
display: flex;
|
|
@@ -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: '
|
|
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"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ9F,MAAM,OAAO,gBAAgB;IAL7B;QAQU,cAAS,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAE1B,SAAI,GAA2D;QACrE,IAAI;QACJ,0BAA0B;QAC1B,cAAc;QACd,KAAK;QACL,IAAI;QACJ,0BAA0B;QAC1B,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,iBAAiB;QACjB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;SACN,CAAC;QACO,iBAAY,GAA2D,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACtF,wBAAmB,GAAW,CAAC,CAAC;QACzC,+CAA+C;QACtC,UAAK,GAAW,MAAM,CAAC,UAAU,CAAC;QAElC,mBAAc,GAAG,KAAK,CAAC;QACvB,oBAAe,GAAG,KAAK,CAAC;QAEzB,gBAAW,GAAW,CAAC,CAAC;QACxB,cAAS,GAAW,CAAC,CAAC;QACtB,gBAAW,GAAW,CAAC,CAAC;QACxB,gBAAW,GAAY,KAAK,CAAC;KA4KtC;IA1KC,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjE,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,YAAY;QACV,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB,CAAC,CAAa;QAC5B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1C,CAAC;IAED,cAAc,CAAC,CAAa;QAC1B,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,WAAW;QACT,MAAM,cAAc,GAAG,EAAE,CAAC,CAAC,+BAA+B;QAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QAE/C,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,cAAc,EAAE,CAAC;YACpC,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;gBACb,4BAA4B;gBAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,4BAA4B;gBAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,MAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC;QAC5B,MAAM,cAAc,GAAG,EAAE,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAE1C,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,cAAc,EAAE,CAAC;YACpC,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;gBACb,6BAA6B;gBAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,6BAA6B;gBAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAE/B,wEAAwE;QACxE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;QAE/B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QAEnE,uGAAuG;QACvG,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;QAChD,IAAI,CAAC,cAAc,GAAG,aAAa,IAAI,UAAU,GAAG,CAAC,CAAC;QACtD,IAAI,CAAC,eAAe,GAAG,aAAa,IAAI,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;IACrF,CAAC;IAGD,cAAc,CAAC,SAAiB,EAAE,QAAgB;QAChD,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;IACtC,CAAC;IAGD,aAAa,CAAC,OAA+D;QAC3E,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;IAChC,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9C,CAAC;IAED,KAAK,CAAC,cAAc,CAAC,KAAa;QAChC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,8BAA8B,IAAI,CAAC,IAAI,EAAE;YAClD,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,4DAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;oBACzD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;wBAC5F,6DACE,CAAC,EAAC,6DAA6D,EAC/D,MAAM,EAAC,4BAA4B,kBACtB,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF,CACF,CACP;YACD,4DACE,KAAK,EAAC,wBAAwB,EAC9B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAiB,CAAC,EAClD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EACnC,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAC3C,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EACvC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACzC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAE3C,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,IAChF,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,0BACE,KAAK,EAAE,mBAAmB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9D,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,IAAI,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,qBAAqB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,6BAA6B,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC7I,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,mBAAmB,KAAK,KAAK,cACjC,GAAG,CAAC,IAAI,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EACnE,SAAS,EAAC,YAAY;oBAEtB,SAAG,IAAI,EAAC,OAAO,IAAE,GAAG,CAAC,UAAU,CAAK,CACjB,CACtB,CAAC,CACE,CACF;YACL,IAAI,CAAC,eAAe,IAAI,CACvB,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC1D,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;wBAC5F,6DACE,CAAC,EAAC,4DAA4D,EAC9D,MAAM,EAAC,4BAA4B,kBACtB,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF,CACF,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
|
|
@@ -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{
|