globuswebcomponents 2.6.1 → 2.6.2
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-action-panel_61.cjs.entry.js → gb-action-panel_63.cjs.entry.js} +260 -15
- package/dist/cjs/gb-action-panel_63.cjs.entry.js.map +1 -0
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-input-field/gb-input-field.js +15 -12
- package/dist/collection/components/gb-input-field/gb-input-field.js.map +1 -1
- package/dist/collection/components/gb-nav-bar/gb-nav-bar.js +98 -98
- package/dist/collection/components/gb-nav-bar/gb-nav-bar.js.map +1 -1
- package/dist/collection/components/gb-nav-bar-item/gb-nav-bar-item.css +4 -0
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js +1 -1
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/components/gb-header.js +1 -1
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-input-field.js +1 -1
- package/dist/components/gb-nav-bar-item.js +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/components/gb-nav-bar.js +98 -98
- package/dist/components/gb-nav-bar.js.map +1 -1
- package/dist/components/gb-pagination.js +2 -2
- package/dist/components/gb-table-header.js +2 -2
- package/dist/components/{p-CZt4BvQa.js → p-B2CfUeJe.js} +3 -3
- package/dist/components/{p-CZt4BvQa.js.map → p-B2CfUeJe.js.map} +1 -1
- package/dist/components/{p-D8sTe7Rd.js → p-CEE4M4bL.js} +17 -14
- package/dist/components/p-CEE4M4bL.js.map +1 -0
- package/dist/components/{p-BB5zWLnP.js → p-Ck4z413l.js} +3 -3
- package/dist/components/{p-BB5zWLnP.js.map → p-Ck4z413l.js.map} +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/{gb-action-panel_61.entry.js → gb-action-panel_63.entry.js} +259 -16
- package/dist/esm/gb-action-panel_63.entry.js.map +1 -0
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-4ecee275.entry.js → p-4e4d5b26.entry.js} +2 -2
- package/dist/globuscomponents/p-4e4d5b26.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/cjs/gb-action-panel_61.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-nav-bar-item.cjs.entry.js +0 -51
- package/dist/cjs/gb-nav-bar-item.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-nav-bar-item.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-nav-bar.cjs.entry.js +0 -205
- package/dist/cjs/gb-nav-bar.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-nav-bar.entry.cjs.js.map +0 -1
- package/dist/components/p-D8sTe7Rd.js.map +0 -1
- package/dist/esm/gb-action-panel_61.entry.js.map +0 -1
- package/dist/esm/gb-nav-bar-item.entry.js +0 -49
- package/dist/esm/gb-nav-bar-item.entry.js.map +0 -1
- package/dist/esm/gb-nav-bar.entry.js +0 -203
- package/dist/esm/gb-nav-bar.entry.js.map +0 -1
- package/dist/globuscomponents/gb-nav-bar-item.entry.esm.js.map +0 -1
- package/dist/globuscomponents/gb-nav-bar.entry.esm.js.map +0 -1
- package/dist/globuscomponents/p-1473caf4.entry.js +0 -2
- package/dist/globuscomponents/p-1473caf4.entry.js.map +0 -1
- package/dist/globuscomponents/p-4ecee275.entry.js.map +0 -1
- package/dist/globuscomponents/p-81bfe1c7.entry.js +0 -2
- package/dist/globuscomponents/p-81bfe1c7.entry.js.map +0 -1
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, a as getAssetPath, h } from './index-Dlqa7tPI.js';
|
|
2
|
-
|
|
3
|
-
const gbNavBarItemCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n /* --------------------------------------Primary Colors--------------------------------------------- */\r\n /* base color palette */\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n /* gray color palette */\r\n --gray-25: #f9fafb;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #808c9e;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0d121c;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #f9f9fb;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7a2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 0% opacity */\r\n /* White */\r\n --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n /* Gray */\r\n --gray25-opacity0: rgba(249, 250, 251, 0);\r\n --gray900-opacity0: rgba(18, 25, 38, 0);\r\n --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n /* 20% opacity */\r\n /* White */\r\n --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n /* Dark Blue */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* Gray */\r\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n /* 50% opacity */\r\n /* White */\r\n --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n /* Gray */\r\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #f5fbff;\r\n --lightBlue-50: #f0f9ff;\r\n --lightBlue-100: #e0f2fe;\r\n --lightBlue-200: #b9e6fe;\r\n --lightBlue-300: #7cd4fd;\r\n --lightBlue-400: #7cd4fd;\r\n --lightBlue-500: #0ba5ec;\r\n --lightBlue-600: #0086c9;\r\n --lightBlue-700: #026aa2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0b4a6f;\r\n --lightBlue-950: #062c41;\r\n\r\n /* blue color palette */\r\n --blue-25: #ecf5fe;\r\n --blue-50: #e4f0fc;\r\n --blue-100: #c8e0f9;\r\n --blue-200: #9ac7f4;\r\n --blue-300: #6aa9e7;\r\n --blue-400: #378fe6;\r\n --blue-500: #075db2;\r\n --blue-600: #064e94;\r\n --blue-700: #053e77;\r\n --blue-800: #042f59;\r\n --blue-900: #022445;\r\n --blue-950: #021d37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #fafaff;\r\n --purple-50: #f4f3ff;\r\n --purple-100: #ebe9fe;\r\n --purple-200: #d9d6fe;\r\n --purple-300: #bdb4fe;\r\n --purple-400: #9b8afb;\r\n --purple-500: #7a5af8;\r\n --purple-600: #6938ef;\r\n --purple-700: #5925dc;\r\n --purple-800: #4a1fb8;\r\n --purple-900: #3e1c96;\r\n --purple-950: #27115f;\r\n\r\n /* pink color palette */\r\n --pink-25: #fef6fb;\r\n --pink-50: #fdf2fa;\r\n --pink-100: #fce7f6;\r\n --pink-200: #fcceee;\r\n --pink-300: #faa7e0;\r\n --pink-400: #f670c7;\r\n --pink-500: #ee46bc;\r\n --pink-600: #dd2590;\r\n --pink-700: #c11574;\r\n --pink-800: #9e165f;\r\n --pink-900: #851651;\r\n --pink-950: #4e0d30;\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme='light'] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-subtle: var(--lightBlue-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-subtle: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n /* --------------Link color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-visited: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-visited: var(--lightBlue-300);\r\n }\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-btn-disabled: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-btn-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtlest: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme='light'] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme='light'] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-skeleton-bold: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton-bold: var(--gray-700);\r\n }\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-bold: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-hovered: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n\r\n /* ----------------Transparent Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-transparent50: var(--white-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent50: var(--gray900-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent20: var(--white-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent20: var(--gray900-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent-full: var(--white-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent-full: var(--gray900-opacity0);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n /* Positive spacing */\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n /* Negative spacing */\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n /* Radius */\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n /* Font Weights */\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n --font-line-height-t-xl: 2rem;\r\n --font-line-height-t-lg: 1.875rem;\r\n --font-line-height-t-md: 1.688rem;\r\n --font-line-height-t-sm: 1.5rem;\r\n --font-line-height-t-xs: 1.25rem;\r\n --font-line-height-t-xxs: 1.125rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n.top_bar_item_div {\r\n display: inline-flex;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n width: fit-content;\r\n align-items: flex-start;\r\n gap: 0.5rem;\r\n background: transparent;\r\n border-radius: var(--rounded-sm);\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n\r\n.top_bar_item_div.colored_background:hover {\r\n background: rgba(33, 44, 101, 0.4);\r\n}\r\n\r\n.top_bar_item_div.colored_background.active {\r\n background: #042f59;\r\n}\r\n\r\n.top_bar_item_div.plain_background:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.top_bar_item_div.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.top_bar_content {\r\n display: flex;\r\n padding: var(--spacing-3) var(--spacing-5);\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.bar {\r\n position: absolute;\r\n bottom: 0;\r\n width: calc(100% - 2.5rem);\r\n height: 0.15rem;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.bar.colored_background {\r\n background-color: #fff;\r\n}\r\n\r\n.bar.plain_background {\r\n background-color: var(--color-background-brandRed, #e21b2e);\r\n}\r\n\r\n.icon {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n stroke: #fff;\r\n}\r\n\r\n.icon.colored_background path[fill] {\r\n fill: #fff;\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: #fff;\r\n}\r\n\r\n.icon.colored_background.active path.has_opacity[fill][opacity] {\r\n /* fill: transparent; */\r\n opacity: 0.5;\r\n}\r\n\r\n.icon.colored_background.active g.has_opacity[fill][opacity] {\r\n /* fill: transparent; */\r\n opacity: 0.5;\r\n}\r\n\r\n.icon.plain_background path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background path.has_opacity,\r\n.icon.plain_background g.has_opacity,\r\n.icon.plain_background circle.has_opacity,\r\n.icon.colored_background path.has_opacity,\r\n.icon.colored_background g.has_opacity,\r\n.icon.colored_background circle.has_opacity {\r\n opacity: 0;\r\n}\r\n\r\n.icon.plain_background.active path.has_opacity,\r\n.icon.plain_background.active g.has_opacity,\r\n.icon.plain_background.active circle.has_opacity,\r\n.icon.colored_background.active path.has_opacity,\r\n.icon.colored_background.active g.has_opacity,\r\n.icon.colored_background.active circle.has_opacity {\r\n opacity: 0.5;\r\n}\r\n\r\n/* .icon.plain_background path[fill].has_opacity,\r\n.icon.plain_background g.has_opacity,\r\n.icon.colored_background path[fill].has_opacity,\r\n.icon.colored_background g.has_opacity {\r\n fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.label_text.colored_background {\r\n color: #fff;\r\n}\r\n\r\n.label_text.plain_background {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n bottom: 198%;\r\n left: -0.7rem;\r\n}\r\n";
|
|
4
|
-
|
|
5
|
-
const GbNavBarItem = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.iconOnly = false;
|
|
9
|
-
this.label = '';
|
|
10
|
-
this.icon = '';
|
|
11
|
-
this.leadingIconSvg = '';
|
|
12
|
-
this.showTooltip = false;
|
|
13
|
-
}
|
|
14
|
-
async loadIcon(iconName) {
|
|
15
|
-
const iconPath = getAssetPath(`${iconName}`);
|
|
16
|
-
const response = await fetch(iconPath);
|
|
17
|
-
const svg = await response.text();
|
|
18
|
-
// Parse SVG into DOM
|
|
19
|
-
const parser = new DOMParser();
|
|
20
|
-
const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
|
|
21
|
-
const svgElement = svgDoc.documentElement;
|
|
22
|
-
// Select all path tags with an opacity attribute
|
|
23
|
-
const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');
|
|
24
|
-
const gWithOpacity = svgElement.querySelectorAll('g[opacity]');
|
|
25
|
-
// Add a class to each
|
|
26
|
-
pathsWithOpacity.forEach(path => {
|
|
27
|
-
path.classList.add('has_opacity');
|
|
28
|
-
});
|
|
29
|
-
gWithOpacity.forEach(g => {
|
|
30
|
-
g.classList.add('has_opacity');
|
|
31
|
-
});
|
|
32
|
-
// Convert the modified SVG back to a string
|
|
33
|
-
const modifiedSvg = svgElement.outerHTML;
|
|
34
|
-
// Save or inject it into your component
|
|
35
|
-
this.leadingIconSvg = modifiedSvg;
|
|
36
|
-
}
|
|
37
|
-
componentWillLoad() {
|
|
38
|
-
this.loadIcon(this.icon);
|
|
39
|
-
}
|
|
40
|
-
render() {
|
|
41
|
-
return (h("div", { key: 'ab91b8c8970f0ced3f18f46c5a14ab628feac79f', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '57655a9f0fdbdefccbf420ebe24c0a562db60a69', class: `top_bar_content` }, this.icon && h("div", { key: 'eb130e6a3866d7530ad105ecb615cebac1715501', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: 'aa5133f2437bb0da57683f0dddfa94dcff450c2b', class: "label" }, h("p", { key: 'ad5241ea9fff0251778eb7a77335b1fa09b88b74', class: `label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '62ddacd023cb4143c1ac6d22e39b9a2ab030a760', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: 'de74c84fafe28f1c7cad61fac6d0d585e1c0c6c8', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: 'fbd7aa776facaf66a4c3f2ed96915f0af5ecf8cc', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '750bd4a925f52cc5df4dc9a61636b62b1c7610fa', slot: "label" }, this.label)))));
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
GbNavBarItem.style = gbNavBarItemCss;
|
|
45
|
-
|
|
46
|
-
export { GbNavBarItem as gb_nav_bar_item };
|
|
47
|
-
//# sourceMappingURL=gb-nav-bar-item.entry.js.map
|
|
48
|
-
|
|
49
|
-
//# sourceMappingURL=gb-nav-bar-item.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"gb-nav-bar-item.entry.js","sources":["src/components/gb-nav-bar-item/gb-nav-bar-item.css?tag=gb-nav-bar-item&encapsulation=shadow","src/components/gb-nav-bar-item/gb-nav-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.top_bar_item_div {\r\n display: inline-flex;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n width: fit-content;\r\n align-items: flex-start;\r\n gap: 0.5rem;\r\n background: transparent;\r\n border-radius: var(--rounded-sm);\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n\r\n.top_bar_item_div.colored_background:hover {\r\n background: rgba(33, 44, 101, 0.4);\r\n}\r\n\r\n.top_bar_item_div.colored_background.active {\r\n background: #042f59;\r\n}\r\n\r\n.top_bar_item_div.plain_background:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.top_bar_item_div.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.top_bar_content {\r\n display: flex;\r\n padding: var(--spacing-3) var(--spacing-5);\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.bar {\r\n position: absolute;\r\n bottom: 0;\r\n width: calc(100% - 2.5rem);\r\n height: 0.15rem;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.bar.colored_background {\r\n background-color: #fff;\r\n}\r\n\r\n.bar.plain_background {\r\n background-color: var(--color-background-brandRed, #e21b2e);\r\n}\r\n\r\n.icon {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n stroke: #fff;\r\n}\r\n\r\n.icon.colored_background path[fill] {\r\n fill: #fff;\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: #fff;\r\n}\r\n\r\n.icon.colored_background.active path.has_opacity[fill][opacity] {\r\n /* fill: transparent; */\r\n opacity: 0.5;\r\n}\r\n\r\n.icon.colored_background.active g.has_opacity[fill][opacity] {\r\n /* fill: transparent; */\r\n opacity: 0.5;\r\n}\r\n\r\n.icon.plain_background path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background path.has_opacity,\r\n.icon.plain_background g.has_opacity,\r\n.icon.plain_background circle.has_opacity,\r\n.icon.colored_background path.has_opacity,\r\n.icon.colored_background g.has_opacity,\r\n.icon.colored_background circle.has_opacity {\r\n opacity: 0;\r\n}\r\n\r\n.icon.plain_background.active path.has_opacity,\r\n.icon.plain_background.active g.has_opacity,\r\n.icon.plain_background.active circle.has_opacity,\r\n.icon.colored_background.active path.has_opacity,\r\n.icon.colored_background.active g.has_opacity,\r\n.icon.colored_background.active circle.has_opacity {\r\n opacity: 0.5;\r\n}\r\n\r\n/* .icon.plain_background path[fill].has_opacity,\r\n.icon.plain_background g.has_opacity,\r\n.icon.colored_background path[fill].has_opacity,\r\n.icon.colored_background g.has_opacity {\r\n fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.label_text.colored_background {\r\n color: #fff;\r\n}\r\n\r\n.label_text.plain_background {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n bottom: 198%;\r\n left: -0.7rem;\r\n}\r\n","import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar-item',\r\n styleUrl: 'gb-nav-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBarItem {\r\n @Prop() state: 'default' | 'active';\r\n @Prop() iconOnly: boolean = false;\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @State() leadingIconSvg: string = '';\r\n @State() showTooltip: boolean = false;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n // Parse SVG into DOM\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Select all path tags with an opacity attribute\r\n const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');\r\n const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n // Add a class to each\r\n pathsWithOpacity.forEach(path => {\r\n path.classList.add('has_opacity');\r\n });\r\n\r\n gWithOpacity.forEach(g => {\r\n g.classList.add('has_opacity');\r\n });\r\n\r\n // Convert the modified SVG back to a string\r\n const modifiedSvg = svgElement.outerHTML;\r\n\r\n // Save or inject it into your component\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`top_bar_item_div ${this.category} ${this.state}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n <div class={`top_bar_content`}>\r\n {this.icon && <div class={`icon ${this.category} ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n {!this.iconOnly && (\r\n <div class=\"label\">\r\n <p class={`label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}`}>{this.label}</p>\r\n </div>\r\n )}\r\n {this.state === 'active' && this.category === 'colored_background' && <div class={`bar ${this.category}`}></div>}\r\n {this.state === 'active' && this.category === 'plain_background' && <div class={`bar ${this.category}`}></div>}\r\n </div> \r\n {this.iconOnly && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"bottom_center\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, a as getAssetPath, h, g as getElement } from './index-Dlqa7tPI.js';
|
|
2
|
-
|
|
3
|
-
const gbNavBarCss = ".top_bar_div{display:flex;width:100%;height:5rem;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;position:relative}.top_bar_div.border.plain_background{border-bottom:1px solid var(--color-border-subtler, #e3e8ef)}.top_bar_div.border.colored_background{border-bottom:1px solid var(--color-border-subtler, #e3e8ef)}.top_bar_div.colored_background{background:linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%)}.top_bar_div.plain_background{background:var(--color-surface)}.top_bar_content{display:flex;padding:0rem 2rem;justify-content:space-between;align-items:center;flex:1 0 0;align-self:stretch}.content{display:flex;align-items:center;gap:1rem;flex:1 0 0;overflow:hidden}.content.shown{overflow:visible}.pattern{position:absolute;top:0;width:100%;height:100%;overflow:hidden;mix-blend-mode:multiply}.more{position:relative}.dropdown_menu{position:absolute;top:112%;right:0;display:flex;width:fit-content;min-width:10rem;padding-right:var(--spacing-2);flex-direction:column;align-items:flex-start;align-items:stretch;border-radius:var(--rounded-sm);border:1px solid var(--color-border-subtler, #e3e8ef);background:var(--color-surface, #ffffff);box-shadow:var(--shadow-sm);position:absolute;gap:var(--spacing-none);transition:1s ease-in-out;z-index:9}";
|
|
4
|
-
|
|
5
|
-
const GbNavBar = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.navBarItemClicked = createEvent(this, "navBarItemClicked");
|
|
9
|
-
this.items = [
|
|
10
|
-
// {
|
|
11
|
-
// label: 'First',
|
|
12
|
-
// icon: 'assets/home-02.svg',
|
|
13
|
-
// iconOnly: false,
|
|
14
|
-
// index: 0,
|
|
15
|
-
// },
|
|
16
|
-
// {
|
|
17
|
-
// label: 'Second',
|
|
18
|
-
// icon: 'assets/bank.svg',
|
|
19
|
-
// iconOnly: false,
|
|
20
|
-
// index: 1,
|
|
21
|
-
// },
|
|
22
|
-
// {
|
|
23
|
-
// label: 'Second',
|
|
24
|
-
// icon: 'assets/money-02.svg',
|
|
25
|
-
// iconOnly: false,
|
|
26
|
-
// index: 2,
|
|
27
|
-
// },
|
|
28
|
-
// {
|
|
29
|
-
// label: 'Second',
|
|
30
|
-
// icon: 'assets/invoice-01.svg',
|
|
31
|
-
// iconOnly: false,
|
|
32
|
-
// index: 3,
|
|
33
|
-
// },
|
|
34
|
-
// {
|
|
35
|
-
// label: 'Second',
|
|
36
|
-
// icon: 'assets/money-exchange-03.svg',
|
|
37
|
-
// iconOnly: false,
|
|
38
|
-
// index: 4,
|
|
39
|
-
// },
|
|
40
|
-
// {
|
|
41
|
-
// label: 'Second',
|
|
42
|
-
// icon: 'assets/percent.svg',
|
|
43
|
-
// iconOnly: false,
|
|
44
|
-
// index: 5,
|
|
45
|
-
// },
|
|
46
|
-
// {
|
|
47
|
-
// label: 'Second',
|
|
48
|
-
// icon: 'assets/qr-code.svg',
|
|
49
|
-
// iconOnly: false,
|
|
50
|
-
// index: 6,
|
|
51
|
-
// },
|
|
52
|
-
// {
|
|
53
|
-
// label: 'Second',
|
|
54
|
-
// icon: 'assets/coins-dollar.svg',
|
|
55
|
-
// iconOnly: false,
|
|
56
|
-
// index: 7,
|
|
57
|
-
// },
|
|
58
|
-
// {
|
|
59
|
-
// label: 'Second',
|
|
60
|
-
// icon: 'assets/star.svg',
|
|
61
|
-
// iconOnly: false,
|
|
62
|
-
// index: 8,
|
|
63
|
-
// },
|
|
64
|
-
// {
|
|
65
|
-
// label: 'Second',
|
|
66
|
-
// icon: 'assets/star.svg',
|
|
67
|
-
// iconOnly: false,
|
|
68
|
-
// index: 9,
|
|
69
|
-
// },
|
|
70
|
-
// {
|
|
71
|
-
// label: 'Second',
|
|
72
|
-
// icon: 'assets/star.svg',
|
|
73
|
-
// iconOnly: false,
|
|
74
|
-
// index: 10,
|
|
75
|
-
// },
|
|
76
|
-
// {
|
|
77
|
-
// label: 'Second',
|
|
78
|
-
// icon: 'assets/star.svg',
|
|
79
|
-
// iconOnly: false,
|
|
80
|
-
// index: 11,
|
|
81
|
-
// },
|
|
82
|
-
// {
|
|
83
|
-
// label: 'Second',
|
|
84
|
-
// icon: 'assets/star.svg',
|
|
85
|
-
// iconOnly: false,
|
|
86
|
-
// index: 12,
|
|
87
|
-
// },
|
|
88
|
-
// {
|
|
89
|
-
// label: 'Second',
|
|
90
|
-
// icon: 'assets/star.svg',
|
|
91
|
-
// iconOnly: false,
|
|
92
|
-
// index: 13,
|
|
93
|
-
// },
|
|
94
|
-
// {
|
|
95
|
-
// label: 'Second',
|
|
96
|
-
// icon: 'assets/star.svg',
|
|
97
|
-
// iconOnly: false,
|
|
98
|
-
// index: 14,
|
|
99
|
-
// },
|
|
100
|
-
// {
|
|
101
|
-
// label: 'Second',
|
|
102
|
-
// icon: 'assets/star.svg',
|
|
103
|
-
// iconOnly: false,
|
|
104
|
-
// index: 15,
|
|
105
|
-
// },
|
|
106
|
-
];
|
|
107
|
-
this.showBorder = true;
|
|
108
|
-
this.activeIndex = 0;
|
|
109
|
-
this.internalItems = [...this.items];
|
|
110
|
-
this.visibleItems = [];
|
|
111
|
-
this.overflowItems = [];
|
|
112
|
-
this.measured = false;
|
|
113
|
-
this.dropdownOpen = false;
|
|
114
|
-
this.dropdownItemClicked = false;
|
|
115
|
-
this.handleResize = () => {
|
|
116
|
-
setTimeout(() => {
|
|
117
|
-
this.calculateOverflow();
|
|
118
|
-
}, 0);
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
onTabItemClicked(index, clicked) {
|
|
122
|
-
this.dropdownItemClicked = false;
|
|
123
|
-
this.activeIndex = index;
|
|
124
|
-
this.navBarItemClicked.emit(index);
|
|
125
|
-
if (clicked) {
|
|
126
|
-
this.dropdownItemClicked = true;
|
|
127
|
-
this.dropdownOpen = false;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
onItemsChanged(newValue, _oldValue) {
|
|
131
|
-
console.log(newValue);
|
|
132
|
-
this.internalItems = [...newValue];
|
|
133
|
-
// console.log(this.internalItems);
|
|
134
|
-
setTimeout(() => {
|
|
135
|
-
this.calculateOverflow();
|
|
136
|
-
this.measured = true;
|
|
137
|
-
}, 0);
|
|
138
|
-
window.addEventListener('resize', this.handleResize);
|
|
139
|
-
}
|
|
140
|
-
componentWillLoad() {
|
|
141
|
-
// setTimeout(() => {
|
|
142
|
-
// this.items = [
|
|
143
|
-
// {
|
|
144
|
-
// label: 'First',
|
|
145
|
-
// icon: 'assets/star.svg',
|
|
146
|
-
// iconOnly: false,
|
|
147
|
-
// index: 0,
|
|
148
|
-
// },
|
|
149
|
-
// ];
|
|
150
|
-
// }, 3000);
|
|
151
|
-
this.internalItems = this.items; // copy initial prop value safely
|
|
152
|
-
}
|
|
153
|
-
componentDidLoad() {
|
|
154
|
-
setTimeout(() => {
|
|
155
|
-
this.calculateOverflow();
|
|
156
|
-
this.measured = true;
|
|
157
|
-
}, 0);
|
|
158
|
-
window.addEventListener('resize', this.handleResize);
|
|
159
|
-
}
|
|
160
|
-
disconnectedCallback() {
|
|
161
|
-
window.removeEventListener('resize', this.handleResize);
|
|
162
|
-
}
|
|
163
|
-
calculateOverflow() {
|
|
164
|
-
const hiddenContainer = this.el.shadowRoot.querySelector('[style*="visibility: hidden"]');
|
|
165
|
-
if (!hiddenContainer)
|
|
166
|
-
return;
|
|
167
|
-
let containerWidth = this.containerEl.offsetWidth;
|
|
168
|
-
let usedWidth = 0;
|
|
169
|
-
const visible = [];
|
|
170
|
-
const hidden = [];
|
|
171
|
-
const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));
|
|
172
|
-
allItems.forEach((el, i) => {
|
|
173
|
-
const itemWidth = el.offsetWidth + 16;
|
|
174
|
-
if (usedWidth + itemWidth < containerWidth - 120) {
|
|
175
|
-
usedWidth += itemWidth;
|
|
176
|
-
visible.push(this.internalItems[i]);
|
|
177
|
-
}
|
|
178
|
-
else {
|
|
179
|
-
hidden.push(this.internalItems[i]);
|
|
180
|
-
}
|
|
181
|
-
});
|
|
182
|
-
this.visibleItems = visible;
|
|
183
|
-
console.log(this.visibleItems);
|
|
184
|
-
this.overflowItems = hidden;
|
|
185
|
-
}
|
|
186
|
-
toggleDropdown() {
|
|
187
|
-
this.dropdownOpen = !this.dropdownOpen;
|
|
188
|
-
}
|
|
189
|
-
render() {
|
|
190
|
-
const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
|
|
191
|
-
return (h("div", { key: 'd27d1dbb434ccb25fea865bf0c26e5981daf9bbc', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '2c1caacf96cff3cda1385ef92238d68328c0440b', class: "pattern" }, h("img", { key: 'bac908018000656ca27c39121e660d1c4a11fc14', src: patternSrc, alt: "" }))), h("div", { key: '5e4d235e3e413522a896af276051f6b84816cad9', class: "top_bar_content" }, h("div", { key: 'e21ab90d0f72dd77cdabcf63a8b60e43853980c2', style: { visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' } }, this.internalItems.map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label })))), h("div", { key: '8159c482d0be2bb78fc215f349b59decd181add5', class: `content ${this.dropdownOpen ? 'shown' : ''}`, ref: el => (this.containerEl = el) }, (this.measured ? this.visibleItems : this.internalItems).map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index) }))), this.measured && this.overflowItems.length > 0 && (h("div", { key: '2d60b3642e15fa9af41d654d3e0e230210efe553', class: "more" }, h("gb-nav-bar-item", { key: 'e7dfdf785b75bd736e2bf81d0ee5d63f7de2ef1d', state: this.dropdownItemClicked ? 'active' : 'default', "icon-only": false, category: this.category, icon: "assets/more.svg", label: "More", class: "more_button", onClick: () => this.toggleDropdown() }), this.dropdownOpen && (h("div", { key: 'f69f85e4621d8ac3f458f300e3f48460bbd11b39', class: "dropdown_menu" }, this.overflowItems.map(tab => (h("gb-dropdown-items-with-shortcut", { icon: true, state: "default", iconSrc: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index, true) })))))))))));
|
|
192
|
-
}
|
|
193
|
-
get el() { return getElement(this); }
|
|
194
|
-
static get watchers() { return {
|
|
195
|
-
"items": ["onItemsChanged"]
|
|
196
|
-
}; }
|
|
197
|
-
};
|
|
198
|
-
GbNavBar.style = gbNavBarCss;
|
|
199
|
-
|
|
200
|
-
export { GbNavBar as gb_nav_bar };
|
|
201
|
-
//# sourceMappingURL=gb-nav-bar.entry.js.map
|
|
202
|
-
|
|
203
|
-
//# sourceMappingURL=gb-nav-bar.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"gb-nav-bar.entry.js","sources":["src/components/gb-nav-bar/gb-nav-bar.css?tag=gb-nav-bar&encapsulation=shadow","src/components/gb-nav-bar/gb-nav-bar.tsx"],"sourcesContent":[".top_bar_div {\r\n display: flex;\r\n width: 100%;\r\n height: 5rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n position: relative;\r\n}\r\n\r\n.top_bar_div.border.plain_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.border.colored_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.colored_background {\r\n background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);\r\n}\r\n\r\n.top_bar_div.plain_background {\r\n background: var(--color-surface);\r\n}\r\n\r\n.top_bar_content {\r\n display: flex;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n flex: 1 0 0;\r\n overflow: hidden;\r\n}\r\n\r\n.content.shown {\r\n overflow: visible;\r\n}\r\n\r\n.pattern {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.more {\r\n position: relative;\r\n}\r\n\r\n.dropdown_menu {\r\n position: absolute;\r\n top: 112%;\r\n right: 0;\r\n\r\n display: flex;\r\n width: fit-content;\r\n min-width: 10rem;\r\n padding-right: var(--spacing-2);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n z-index: 9;\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar',\r\n styleUrl: 'gb-nav-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBar {\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop({ mutable: true }) items: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [\r\n // {\r\n // label: 'First',\r\n // icon: 'assets/home-02.svg',\r\n // iconOnly: false,\r\n // index: 0,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/bank.svg',\r\n // iconOnly: false,\r\n // index: 1,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/money-02.svg',\r\n // iconOnly: false,\r\n // index: 2,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/invoice-01.svg',\r\n // iconOnly: false,\r\n // index: 3,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/money-exchange-03.svg',\r\n // iconOnly: false,\r\n // index: 4,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/percent.svg',\r\n // iconOnly: false,\r\n // index: 5,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/qr-code.svg',\r\n // iconOnly: false,\r\n // index: 6,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/coins-dollar.svg',\r\n // iconOnly: false,\r\n // index: 7,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 8,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 9,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 10,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 11,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 12,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 13,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 14,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 15,\r\n // },\r\n ];\r\n @Prop() showBorder: boolean = true;\r\n @Prop({ mutable: true }) activeIndex: number = 0;\r\n @Element() el: HTMLElement;\r\n @State() internalItems: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [...this.items];\r\n @State() visibleItems: typeof this.items = [];\r\n @State() overflowItems: typeof this.items = [];\r\n @State() measured: boolean = false;\r\n @State() dropdownOpen: boolean = false;\r\n @State() dropdownItemClicked: boolean = false;\r\n @Event() navBarItemClicked: EventEmitter<number>;\r\n\r\n private containerEl!: HTMLElement;\r\n\r\n onTabItemClicked(index: number, clicked?: boolean) {\r\n this.dropdownItemClicked = false;\r\n this.activeIndex = index;\r\n this.navBarItemClicked.emit(index);\r\n\r\n if (clicked) {\r\n this.dropdownItemClicked = true;\r\n this.dropdownOpen = false;\r\n }\r\n }\r\n\r\n @Watch('items')\r\n onItemsChanged(newValue: { label: string; icon: string; iconOnly: boolean; index: number }[], _oldValue) {\r\n console.log(newValue);\r\n this.internalItems = [...newValue];\r\n // console.log(this.internalItems);\r\n\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n componentWillLoad() {\r\n // setTimeout(() => {\r\n // this.items = [\r\n // {\r\n // label: 'First',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 0,\r\n // },\r\n // ];\r\n // }, 3000);\r\n\r\n this.internalItems = this.items; // copy initial prop value safely\r\n }\r\n\r\n private handleResize = () => {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n }, 0);\r\n };\r\n\r\n componentDidLoad() {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener('resize', this.handleResize);\r\n }\r\n\r\n calculateOverflow() {\r\n const hiddenContainer = this.el.shadowRoot.querySelector('[style*=\"visibility: hidden\"]');\r\n if (!hiddenContainer) return;\r\n\r\n let containerWidth = this.containerEl.offsetWidth;\r\n let usedWidth = 0;\r\n const visible = [];\r\n const hidden = [];\r\n\r\n const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));\r\n\r\n allItems.forEach((el, i) => {\r\n const itemWidth = (el as HTMLElement).offsetWidth + 16;\r\n if (usedWidth + itemWidth < containerWidth - 120) {\r\n usedWidth += itemWidth;\r\n visible.push(this.internalItems[i]);\r\n } else {\r\n hidden.push(this.internalItems[i]);\r\n }\r\n });\r\n\r\n this.visibleItems = visible;\r\n console.log(this.visibleItems);\r\n this.overflowItems = hidden;\r\n }\r\n\r\n toggleDropdown() {\r\n this.dropdownOpen = !this.dropdownOpen;\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n return (\r\n <div class={`top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"top_bar_content\">\r\n {/* Hidden measurement container for overflow calculation */}\r\n <div style={{ visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' }}>\r\n {this.internalItems.map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n ></gb-nav-bar-item>\r\n ))}\r\n </div>\r\n <div class={`content ${this.dropdownOpen ? 'shown' : ''}`} ref={el => (this.containerEl = el)}>\r\n {(this.measured ? this.visibleItems : this.internalItems).map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index)}\r\n ></gb-nav-bar-item>\r\n ))}\r\n {this.measured && this.overflowItems.length > 0 && (\r\n <div class=\"more\">\r\n <gb-nav-bar-item\r\n state={this.dropdownItemClicked ? 'active' : 'default'}\r\n icon-only={false}\r\n category={this.category}\r\n icon=\"assets/more.svg\"\r\n label=\"More\"\r\n class=\"more_button\"\r\n onClick={() => this.toggleDropdown()}\r\n ></gb-nav-bar-item>\r\n {this.dropdownOpen && (\r\n <div class=\"dropdown_menu\">\r\n {this.overflowItems.map(tab => (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n state=\"default\"\r\n iconSrc={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index, true)}\r\n ></gb-dropdown-items-with-shortcut>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"gb-nav-bar-item.entry.esm.js","sources":["src/components/gb-nav-bar-item/gb-nav-bar-item.css?tag=gb-nav-bar-item&encapsulation=shadow","src/components/gb-nav-bar-item/gb-nav-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.top_bar_item_div {\r\n display: inline-flex;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n width: fit-content;\r\n align-items: flex-start;\r\n gap: 0.5rem;\r\n background: transparent;\r\n border-radius: var(--rounded-sm);\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n\r\n.top_bar_item_div.colored_background:hover {\r\n background: rgba(33, 44, 101, 0.4);\r\n}\r\n\r\n.top_bar_item_div.colored_background.active {\r\n background: #042f59;\r\n}\r\n\r\n.top_bar_item_div.plain_background:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.top_bar_item_div.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.top_bar_content {\r\n display: flex;\r\n padding: var(--spacing-3) var(--spacing-5);\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.bar {\r\n position: absolute;\r\n bottom: 0;\r\n width: calc(100% - 2.5rem);\r\n height: 0.15rem;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.bar.colored_background {\r\n background-color: #fff;\r\n}\r\n\r\n.bar.plain_background {\r\n background-color: var(--color-background-brandRed, #e21b2e);\r\n}\r\n\r\n.icon {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n stroke: #fff;\r\n}\r\n\r\n.icon.colored_background path[fill] {\r\n fill: #fff;\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: #fff;\r\n}\r\n\r\n.icon.colored_background.active path.has_opacity[fill][opacity] {\r\n /* fill: transparent; */\r\n opacity: 0.5;\r\n}\r\n\r\n.icon.colored_background.active g.has_opacity[fill][opacity] {\r\n /* fill: transparent; */\r\n opacity: 0.5;\r\n}\r\n\r\n.icon.plain_background path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background path.has_opacity,\r\n.icon.plain_background g.has_opacity,\r\n.icon.plain_background circle.has_opacity,\r\n.icon.colored_background path.has_opacity,\r\n.icon.colored_background g.has_opacity,\r\n.icon.colored_background circle.has_opacity {\r\n opacity: 0;\r\n}\r\n\r\n.icon.plain_background.active path.has_opacity,\r\n.icon.plain_background.active g.has_opacity,\r\n.icon.plain_background.active circle.has_opacity,\r\n.icon.colored_background.active path.has_opacity,\r\n.icon.colored_background.active g.has_opacity,\r\n.icon.colored_background.active circle.has_opacity {\r\n opacity: 0.5;\r\n}\r\n\r\n/* .icon.plain_background path[fill].has_opacity,\r\n.icon.plain_background g.has_opacity,\r\n.icon.colored_background path[fill].has_opacity,\r\n.icon.colored_background g.has_opacity {\r\n fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.label_text.colored_background {\r\n color: #fff;\r\n}\r\n\r\n.label_text.plain_background {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n bottom: 198%;\r\n left: -0.7rem;\r\n}\r\n","import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar-item',\r\n styleUrl: 'gb-nav-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBarItem {\r\n @Prop() state: 'default' | 'active';\r\n @Prop() iconOnly: boolean = false;\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @State() leadingIconSvg: string = '';\r\n @State() showTooltip: boolean = false;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n // Parse SVG into DOM\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Select all path tags with an opacity attribute\r\n const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');\r\n const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n // Add a class to each\r\n pathsWithOpacity.forEach(path => {\r\n path.classList.add('has_opacity');\r\n });\r\n\r\n gWithOpacity.forEach(g => {\r\n g.classList.add('has_opacity');\r\n });\r\n\r\n // Convert the modified SVG back to a string\r\n const modifiedSvg = svgElement.outerHTML;\r\n\r\n // Save or inject it into your component\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`top_bar_item_div ${this.category} ${this.state}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n <div class={`top_bar_content`}>\r\n {this.icon && <div class={`icon ${this.category} ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n {!this.iconOnly && (\r\n <div class=\"label\">\r\n <p class={`label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}`}>{this.label}</p>\r\n </div>\r\n )}\r\n {this.state === 'active' && this.category === 'colored_background' && <div class={`bar ${this.category}`}></div>}\r\n {this.state === 'active' && this.category === 'plain_background' && <div class={`bar ${this.category}`}></div>}\r\n </div> \r\n {this.iconOnly && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"bottom_center\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"gb-nav-bar.entry.esm.js","sources":["src/components/gb-nav-bar/gb-nav-bar.css?tag=gb-nav-bar&encapsulation=shadow","src/components/gb-nav-bar/gb-nav-bar.tsx"],"sourcesContent":[".top_bar_div {\r\n display: flex;\r\n width: 100%;\r\n height: 5rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n position: relative;\r\n}\r\n\r\n.top_bar_div.border.plain_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.border.colored_background {\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.colored_background {\r\n background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);\r\n}\r\n\r\n.top_bar_div.plain_background {\r\n background: var(--color-surface);\r\n}\r\n\r\n.top_bar_content {\r\n display: flex;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n flex: 1 0 0;\r\n overflow: hidden;\r\n}\r\n\r\n.content.shown {\r\n overflow: visible;\r\n}\r\n\r\n.pattern {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.more {\r\n position: relative;\r\n}\r\n\r\n.dropdown_menu {\r\n position: absolute;\r\n top: 112%;\r\n right: 0;\r\n\r\n display: flex;\r\n width: fit-content;\r\n min-width: 10rem;\r\n padding-right: var(--spacing-2);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n z-index: 9;\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-nav-bar',\r\n styleUrl: 'gb-nav-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbNavBar {\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop({ mutable: true }) items: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [\r\n // {\r\n // label: 'First',\r\n // icon: 'assets/home-02.svg',\r\n // iconOnly: false,\r\n // index: 0,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/bank.svg',\r\n // iconOnly: false,\r\n // index: 1,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/money-02.svg',\r\n // iconOnly: false,\r\n // index: 2,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/invoice-01.svg',\r\n // iconOnly: false,\r\n // index: 3,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/money-exchange-03.svg',\r\n // iconOnly: false,\r\n // index: 4,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/percent.svg',\r\n // iconOnly: false,\r\n // index: 5,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/qr-code.svg',\r\n // iconOnly: false,\r\n // index: 6,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/coins-dollar.svg',\r\n // iconOnly: false,\r\n // index: 7,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 8,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 9,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 10,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 11,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 12,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 13,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 14,\r\n // },\r\n // {\r\n // label: 'Second',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 15,\r\n // },\r\n ];\r\n @Prop() showBorder: boolean = true;\r\n @Prop({ mutable: true }) activeIndex: number = 0;\r\n @Element() el: HTMLElement;\r\n @State() internalItems: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [...this.items];\r\n @State() visibleItems: typeof this.items = [];\r\n @State() overflowItems: typeof this.items = [];\r\n @State() measured: boolean = false;\r\n @State() dropdownOpen: boolean = false;\r\n @State() dropdownItemClicked: boolean = false;\r\n @Event() navBarItemClicked: EventEmitter<number>;\r\n\r\n private containerEl!: HTMLElement;\r\n\r\n onTabItemClicked(index: number, clicked?: boolean) {\r\n this.dropdownItemClicked = false;\r\n this.activeIndex = index;\r\n this.navBarItemClicked.emit(index);\r\n\r\n if (clicked) {\r\n this.dropdownItemClicked = true;\r\n this.dropdownOpen = false;\r\n }\r\n }\r\n\r\n @Watch('items')\r\n onItemsChanged(newValue: { label: string; icon: string; iconOnly: boolean; index: number }[], _oldValue) {\r\n console.log(newValue);\r\n this.internalItems = [...newValue];\r\n // console.log(this.internalItems);\r\n\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n componentWillLoad() {\r\n // setTimeout(() => {\r\n // this.items = [\r\n // {\r\n // label: 'First',\r\n // icon: 'assets/star.svg',\r\n // iconOnly: false,\r\n // index: 0,\r\n // },\r\n // ];\r\n // }, 3000);\r\n\r\n this.internalItems = this.items; // copy initial prop value safely\r\n }\r\n\r\n private handleResize = () => {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n }, 0);\r\n };\r\n\r\n componentDidLoad() {\r\n setTimeout(() => {\r\n this.calculateOverflow();\r\n this.measured = true;\r\n }, 0);\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener('resize', this.handleResize);\r\n }\r\n\r\n calculateOverflow() {\r\n const hiddenContainer = this.el.shadowRoot.querySelector('[style*=\"visibility: hidden\"]');\r\n if (!hiddenContainer) return;\r\n\r\n let containerWidth = this.containerEl.offsetWidth;\r\n let usedWidth = 0;\r\n const visible = [];\r\n const hidden = [];\r\n\r\n const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));\r\n\r\n allItems.forEach((el, i) => {\r\n const itemWidth = (el as HTMLElement).offsetWidth + 16;\r\n if (usedWidth + itemWidth < containerWidth - 120) {\r\n usedWidth += itemWidth;\r\n visible.push(this.internalItems[i]);\r\n } else {\r\n hidden.push(this.internalItems[i]);\r\n }\r\n });\r\n\r\n this.visibleItems = visible;\r\n console.log(this.visibleItems);\r\n this.overflowItems = hidden;\r\n }\r\n\r\n toggleDropdown() {\r\n this.dropdownOpen = !this.dropdownOpen;\r\n }\r\n\r\n render() {\r\n const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n return (\r\n <div class={`top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"top_bar_content\">\r\n {/* Hidden measurement container for overflow calculation */}\r\n <div style={{ visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' }}>\r\n {this.internalItems.map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n ></gb-nav-bar-item>\r\n ))}\r\n </div>\r\n <div class={`content ${this.dropdownOpen ? 'shown' : ''}`} ref={el => (this.containerEl = el)}>\r\n {(this.measured ? this.visibleItems : this.internalItems).map(tab => (\r\n <gb-nav-bar-item\r\n state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n icon-only={tab.iconOnly}\r\n category={this.category}\r\n icon={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index)}\r\n ></gb-nav-bar-item>\r\n ))}\r\n {this.measured && this.overflowItems.length > 0 && (\r\n <div class=\"more\">\r\n <gb-nav-bar-item\r\n state={this.dropdownItemClicked ? 'active' : 'default'}\r\n icon-only={false}\r\n category={this.category}\r\n icon=\"assets/more.svg\"\r\n label=\"More\"\r\n class=\"more_button\"\r\n onClick={() => this.toggleDropdown()}\r\n ></gb-nav-bar-item>\r\n {this.dropdownOpen && (\r\n <div class=\"dropdown_menu\">\r\n {this.overflowItems.map(tab => (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n state=\"default\"\r\n iconSrc={tab.icon}\r\n label={tab.label}\r\n onClick={() => this.onTabItemClicked(tab.index, true)}\r\n ></gb-dropdown-items-with-shortcut>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
|