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.
- package/dist/cjs/gb-accordion-card_91.cjs.entry.js +103 -95
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.css +9 -0
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js +103 -95
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js.map +1 -1
- package/dist/components/gb-horizontal-tabs.js +103 -95
- package/dist/components/gb-horizontal-tabs.js.map +1 -1
- package/dist/docs.json +3 -3
- package/dist/esm/gb-accordion-card_91.entry.js +103 -95
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-1746afc7.entry.js → p-2200c6fa.entry.js} +2 -2
- package/dist/globuscomponents/p-2200c6fa.entry.js.map +1 -0
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
- package/dist/globuscomponents/p-1746afc7.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-horizontal-tabs.js","mappings":"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","names":["GbHorizontalTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-horizontal-tabs/gb-horizontal-tabs.css?tag=gb-horizontal-tabs&encapsulation=shadow","src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n.horizontal_tab_div_wrapper {\n width: 100%;\n overflow-x: auto;\n scroll-behavior: smooth;\n scrollbar-width: none; /* Firefox */\n position: relative;\n flex: 1;\n}\n\n.horizontal_tab_div_wrapper.underline,\n.horizontal_tab_div_wrapper.underline_filled{\n box-shadow: inset 0 -1px 0 0 var(--color-border-subtle, #cdd5df);\n}\n\n.horizontal_tab_wrapper {\n display: flex;\n align-items: center;\n width: 100%;\n display: flex;\n overflow: hidden;\n}\n\n.horizontal_tab_div_wrapper::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n}\n\n.horizontal_tab_div {\n display: flex;\n justify-content: flex-start;\n gap: var(--spacing-4);\n /* Sized to fit all the tabs at their natural (nowrap) width, not capped to\n * the scrollable wrapper's width - that's what lets it grow wider than the\n * wrapper so scrollWidth > clientWidth and the scroll buttons/overflow\n * detection actually have something to trigger on. full_width below\n * re-pins it to 100% since that variant deliberately has no overflow. */\n width: max-content;\n /* It's also a flex item of .horizontal_tab_wrapper - without this, the\n * default flex-shrink:1 would squeeze it back down to fit, undoing the\n * width above and silently preventing any overflow/scrolling. */\n flex-shrink: 0;\n}\n\n/* Tab Type Styles */\n.horizontal_tab_div.underline,\n.horizontal_tab_div.underline_filled {\n width: 100%;\n}\n\n.horizontal_tab_div.button_white_border,\n.horizontal_tab_div.rounded_button_white_border {\n padding: var(--spacing-1);\n background: var(--color-background-gray-subtler, #eef2f6);\n border: 1px solid var(--color-border-subtler, #e3e8ef);\n}\n\n.horizontal_tab_div.button_white_border {\n border-radius: var(--rounded-sm);\n}\n\n.horizontal_tab_div.rounded_button_white_border {\n border-radius: var(--rounded-full);\n}\n\n/* Full Width Styles */\n.horizontal_tab_div.full_width {\n width: 100%;\n justify-content: space-between;\n}\n\n.horizontal_tab_div.button_primary,\n.horizontal_tab_div.button_gray,\n.horizontal_tab_div.button_white_border,\n.horizontal_tab_div.rounded_button_white_border {\n gap: var(--spacing-2);\n}\n\n.tab_button_base.full_width {\n display: flex;\n justify-content: center;\n flex-grow: 1;\n}\n\n.scroll_button_div {\n display: flex;\n /* Fills the tab row's actual height instead of a fixed value, so it stays\n * correctly centered whatever the row's height ends up being (it varies by\n * `size` and `type`) rather than only matching one specific size. */\n height: 100%;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n top: 0;\n position: absolute;\n z-index: 9;\n /* No fixed width - it's sized by its own padding/content below, on both\n * sides, so it adapts instead of clipping/gapping at other paddings. */\n}\n\n.scroll_button_div.left {\n left: 0;\n background: linear-gradient(90deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);\n padding: 0.1rem 2rem 0.1rem 0.5rem;\n}\n\n.scroll_button_div.right {\n background: linear-gradient(270deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);\n padding: 0.1rem 0.5rem 0.1rem 2rem;\n right: 0;\n}\n\n.scroll_button {\n display: flex;\n padding: var(--spacing-1);\n align-items: center;\n gap: var(--spacing-2);\n border-radius: var(--rounded-full);\n border: 1px solid var(--color-border-subtler, #e3e8ef);\n background: var(--color-background-card, #ffffff);\n cursor: pointer;\n}\n","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"],"version":3}
|
|
1
|
+
{"file":"gb-horizontal-tabs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,qvtEAAqvtE;;MCQpwtEA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQU,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC1B,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;QAEzB,IAAA,CAAA,IAAI,GAA2D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA8FtE;QACQ,IAAA,CAAA,YAAY,GAA2D,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;AACrF,QAAA,IAAmB,CAAA,mBAAA,GAAW,CAAC;;AAE/B,QAAA,IAAA,CAAA,KAAK,GAAW,MAAM,CAAC,UAAU;AAEjC,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AACtB,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAExB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;AACvB,QAAA,IAAS,CAAA,SAAA,GAAW,CAAC;AACrB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;AACvB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAqLrC;IAnLC,gBAAgB,GAAA;QACd,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;IAGhE,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;IAG/D,YAAY,GAAA;QACV,IAAI,CAAC,mBAAmB,EAAE;;AAG5B,IAAA,gBAAgB,CAAC,CAAa,EAAA;QAC5B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;;AAGzC,IAAA,cAAc,CAAC,CAAa,EAAA;QAC1B,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO;QAC5C,IAAI,CAAC,WAAW,EAAE;;IAGpB,WAAW,GAAA;AACT,QAAA,MAAM,cAAc,GAAG,EAAE,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS;QAE9C,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,cAAc,EAAE;AACnC,YAAA,IAAI,IAAI,GAAG,CAAC,EAAE;;gBAEZ,IAAI,CAAC,WAAW,EAAE;;iBACb;;gBAEL,IAAI,CAAC,UAAU,EAAE;;;;AAKvB,IAAA,eAAe,CAAC,CAAa,EAAA;AAC3B,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO;;AAG9B,IAAA,aAAa,CAAC,CAAa,EAAA;QACzB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE;AACvB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,QAAA,MAAM,SAAS,GAAG,CAAC,CAAC,OAAO;QAC3B,MAAM,cAAc,GAAG,EAAE;AACzB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS;QAEzC,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,cAAc,EAAE;AACnC,YAAA,IAAI,IAAI,GAAG,CAAC,EAAE;;gBAEZ,IAAI,CAAC,WAAW,EAAE;;iBACb;;gBAEL,IAAI,CAAC,UAAU,EAAE;;;;IAKvB,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;IAI1B,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE;;AAGxB,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QAE9B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,YAAY;;AAGlE,QAAA,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW;QAC/C,IAAI,CAAC,cAAc,GAAG,aAAa,IAAI,UAAU,GAAG,CAAC;AACrD,QAAA,IAAI,CAAC,eAAe,GAAG,aAAa,IAAI,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC;;IAIpF,cAAc,CAAC,SAAiB,EAAE,QAAgB,EAAA;AAChD,QAAA,IAAI,CAAC,mBAAmB,GAAG,QAAQ;;AAIrC,IAAA,aAAa,CAAC,OAA+D,EAAA;AAC3E,QAAA,IAAI,CAAC,YAAY,GAAG,OAAO;;;;;;QAO3B,qBAAqB,CAAC,MAAK;YACzB,qBAAqB,CAAC,MAAM,IAAI,CAAC,mBAAmB,EAAE,CAAC;AACzD,SAAC,CAAC;;IAGJ,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;IAG/B,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW;;IAG7C,MAAM,cAAc,CAAC,KAAa,EAAA;AAChC,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGjC,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,CAA8B,2BAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EAClD,IAAI,CAAC,cAAc,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAA,EACzD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,6DAA6D,EAC/D,MAAM,EAAC,4BAA4B,EAAA,cAAA,EACtB,KAAK,EAAA,gBAAA,EACH,OAAO,EACN,iBAAA,EAAA,OAAO,GACvB,CACE,CACF,CACF,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAiB,CAAC,EAClD,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,YAAY,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAC3C,UAAU,EAAE,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EACvC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACzC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACrC,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAA,EAE3C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,EAAE,CAAE,CAAA,EAChF,EAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MAChC,CACE,CAAA,oBAAA,EAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,EAAE,CAAA,CAAE,EAC9D,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,YAAA,EACH,IAAI,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,qBAAqB,GAAG,cAAc,GAAG,IAAI,CAAC,IAAI,KAAK,6BAA6B,GAAG,sBAAsB,GAAG,IAAI,CAAC,IAAI,EAC7I,OAAO,EAAE,MAAM,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,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,UAAU,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,EACnE,SAAS,EAAC,YAAY,EAAA,EAEtB,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,OAAO,EAAA,EAAE,GAAG,CAAC,UAAU,CAAK,CACjB,CACtB,CAAC,CACE,CACF,EACL,IAAI,CAAC,eAAe,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,4DAA4D,EAC9D,MAAM,EAAC,4BAA4B,kBACtB,KAAK,EAAA,gBAAA,EACH,OAAO,EACN,iBAAA,EAAA,OAAO,GACvB,CACE,CACF,CACF,CACP,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbHorizontalTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-horizontal-tabs/gb-horizontal-tabs.css?tag=gb-horizontal-tabs&encapsulation=shadow","src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n:host {\n /* Without this the host defaults to display:inline, so the width:100% below\n * has no real containing block to resolve against - consuming apps\n * shouldn't need to wrap this in a sized container just to make the\n * overflow/scroll-button math work. */\n display: block;\n width: 100%;\n min-width: 0;\n}\n\n.horizontal_tab_div_wrapper {\n width: 100%;\n overflow-x: auto;\n scroll-behavior: smooth;\n scrollbar-width: none; /* Firefox */\n position: relative;\n flex: 1;\n}\n\n.horizontal_tab_div_wrapper.underline,\n.horizontal_tab_div_wrapper.underline_filled{\n box-shadow: inset 0 -1px 0 0 var(--color-border-subtle, #cdd5df);\n}\n\n.horizontal_tab_wrapper {\n display: flex;\n align-items: center;\n width: 100%;\n display: flex;\n overflow: hidden;\n}\n\n.horizontal_tab_div_wrapper::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n}\n\n.horizontal_tab_div {\n display: flex;\n justify-content: flex-start;\n gap: var(--spacing-4);\n /* Sized to fit all the tabs at their natural (nowrap) width, not capped to\n * the scrollable wrapper's width - that's what lets it grow wider than the\n * wrapper so scrollWidth > clientWidth and the scroll buttons/overflow\n * detection actually have something to trigger on. full_width below\n * re-pins it to 100% since that variant deliberately has no overflow. */\n width: max-content;\n /* It's also a flex item of .horizontal_tab_wrapper - without this, the\n * default flex-shrink:1 would squeeze it back down to fit, undoing the\n * width above and silently preventing any overflow/scrolling. */\n flex-shrink: 0;\n}\n\n/* Tab Type Styles */\n.horizontal_tab_div.underline,\n.horizontal_tab_div.underline_filled {\n width: 100%;\n}\n\n.horizontal_tab_div.button_white_border,\n.horizontal_tab_div.rounded_button_white_border {\n padding: var(--spacing-1);\n background: var(--color-background-gray-subtler, #eef2f6);\n border: 1px solid var(--color-border-subtler, #e3e8ef);\n}\n\n.horizontal_tab_div.button_white_border {\n border-radius: var(--rounded-sm);\n}\n\n.horizontal_tab_div.rounded_button_white_border {\n border-radius: var(--rounded-full);\n}\n\n/* Full Width Styles */\n.horizontal_tab_div.full_width {\n width: 100%;\n justify-content: space-between;\n}\n\n.horizontal_tab_div.button_primary,\n.horizontal_tab_div.button_gray,\n.horizontal_tab_div.button_white_border,\n.horizontal_tab_div.rounded_button_white_border {\n gap: var(--spacing-2);\n}\n\n.tab_button_base.full_width {\n display: flex;\n justify-content: center;\n flex-grow: 1;\n}\n\n.scroll_button_div {\n display: flex;\n /* Fills the tab row's actual height instead of a fixed value, so it stays\n * correctly centered whatever the row's height ends up being (it varies by\n * `size` and `type`) rather than only matching one specific size. */\n height: 100%;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n top: 0;\n position: absolute;\n z-index: 9;\n /* No fixed width - it's sized by its own padding/content below, on both\n * sides, so it adapts instead of clipping/gapping at other paddings. */\n}\n\n.scroll_button_div.left {\n left: 0;\n background: linear-gradient(90deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);\n padding: 0.1rem 2rem 0.1rem 0.5rem;\n}\n\n.scroll_button_div.right {\n background: linear-gradient(270deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);\n padding: 0.1rem 0.5rem 0.1rem 2rem;\n right: 0;\n}\n\n.scroll_button {\n display: flex;\n padding: var(--spacing-1);\n align-items: center;\n gap: var(--spacing-2);\n border-radius: var(--rounded-full);\n border: 1px solid var(--color-border-subtler, #e3e8ef);\n background: var(--color-background-card, #ffffff);\n cursor: pointer;\n}\n","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"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-09-
|
|
2
|
+
"timestamp": "2026-09-18T07:37:30",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.38.3",
|
|
@@ -16801,10 +16801,10 @@
|
|
|
16801
16801
|
"docsTags": [
|
|
16802
16802
|
{
|
|
16803
16803
|
"name": "default",
|
|
16804
|
-
"text": "[\n {\n
|
|
16804
|
+
"text": "[\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 ]"
|
|
16805
16805
|
}
|
|
16806
16806
|
],
|
|
16807
|
-
"default": "[\n {\n
|
|
16807
|
+
"default": "[\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 ]",
|
|
16808
16808
|
"values": [
|
|
16809
16809
|
{
|
|
16810
16810
|
"type": "{ name: string; index: number; badgeCount?: string; }[]"
|