globuswebcomponents 2.18.3 → 2.18.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{gb-accordion-card_86.cjs.entry.js → gb-accordion-card_78.cjs.entry.js} +2906 -6271
- package/dist/cjs/gb-approval-modal.cjs.entry.js +5 -1
- package/dist/cjs/gb-approval-modal.entry.cjs.js.map +1 -1
- package/dist/cjs/gb-filter-modal.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-portal.gb-table-header.gb-toggle.gb-toggle-base.entry.cjs.js.map +1 -0
- package/dist/cjs/gb-filter-modal_8.cjs.entry.js +2253 -0
- package/dist/cjs/gb-table.cjs.entry.js +1240 -0
- package/dist/cjs/gb-table.entry.cjs.js.map +1 -0
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/reusableModels-_LRAKnsh.js.map +1 -1
- package/dist/collection/components/gb-approval-modal/gb-approval-modal.js +19 -1
- package/dist/collection/components/gb-approval-modal/gb-approval-modal.js.map +1 -1
- package/dist/collection/components/gb-button/readme.md +7 -0
- package/dist/collection/components/gb-date-picker/gb-date-picker.js +5 -2
- package/dist/collection/components/gb-date-picker/gb-date-picker.js.map +1 -1
- package/dist/collection/components/gb-detail-cell/gb-detail-cell.js +1 -1
- package/dist/collection/components/gb-detail-cell/gb-detail-cell.js.map +1 -1
- package/dist/collection/components/gb-input-field/gb-input-field.js +59 -16
- package/dist/collection/components/gb-input-field/gb-input-field.js.map +1 -1
- package/dist/collection/components/gb-sidebar/gb-sidebar.css +1 -0
- package/dist/collection/components/gb-table/gb-table.css +7 -0
- package/dist/collection/components/gb-table/gb-table.js +26 -20
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/collection/models/reusableModels.js.map +1 -1
- package/dist/components/gb-approval-modal.js +5 -1
- package/dist/components/gb-approval-modal.js.map +1 -1
- package/dist/components/gb-date-picker.js +1 -1
- package/dist/components/gb-detail-cell.js +1 -1
- package/dist/components/gb-detail-cell.js.map +1 -1
- package/dist/components/gb-filter-modal.js +1 -1
- package/dist/components/gb-header.js +1 -1
- package/dist/components/gb-input-dropdown-test.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-pagination.js +1 -1
- package/dist/components/gb-rich-text.js +3 -3
- package/dist/components/gb-sidebar.js +1 -1
- package/dist/components/gb-sidebar.js.map +1 -1
- package/dist/components/gb-table-header.js +1 -1
- package/dist/components/gb-table.js +1 -1
- package/dist/components/gb-wysiwyg-toolbar.js +1 -1
- package/dist/components/{p-DQBORnne.js → p-6aww0fa8.js} +3 -3
- package/dist/components/{p-DQBORnne.js.map → p-6aww0fa8.js.map} +1 -1
- package/dist/components/{p-DsN3hb33.js → p-BD74vctU.js} +4 -4
- package/dist/components/{p-DsN3hb33.js.map → p-BD74vctU.js.map} +1 -1
- package/dist/components/{p-CzePcMXF.js → p-C2nwKlIB.js} +4 -4
- package/dist/components/{p-CzePcMXF.js.map → p-C2nwKlIB.js.map} +1 -1
- package/dist/components/{p-CsyLoHd6.js → p-CTisVkYS.js} +7 -4
- package/dist/components/p-CTisVkYS.js.map +1 -0
- package/dist/components/{p-DQOaeODg.js → p-DQyU_YBJ.js} +26 -24
- package/dist/components/p-DQyU_YBJ.js.map +1 -0
- package/dist/components/{p-CITjyuOY.js → p-DYpvfQik.js} +4 -4
- package/dist/components/{p-CITjyuOY.js.map → p-DYpvfQik.js.map} +1 -1
- package/dist/components/{p-BF-N7J8c.js → p-JNQBEWGY.js} +3 -3
- package/dist/components/{p-BF-N7J8c.js.map → p-JNQBEWGY.js.map} +1 -1
- package/dist/components/p-cHn6O-Kf.js.map +1 -1
- package/dist/components/{p-DtJfuVIF.js → p-q1BXlX2S.js} +40 -17
- package/dist/components/p-q1BXlX2S.js.map +1 -0
- package/dist/components/test-wrapper.js +7 -7
- package/dist/docs.json +70 -11
- package/dist/esm/{gb-accordion-card_86.entry.js → gb-accordion-card_78.entry.js} +2906 -6263
- package/dist/esm/gb-approval-modal.entry.js +5 -1
- package/dist/esm/gb-approval-modal.entry.js.map +1 -1
- package/dist/esm/gb-filter-modal.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-portal.gb-table-header.gb-toggle.gb-toggle-base.entry.js.map +1 -0
- package/dist/esm/gb-filter-modal_8.entry.js +2244 -0
- package/dist/esm/gb-table.entry.js +1238 -0
- package/dist/esm/gb-table.entry.js.map +1 -0
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/reusableModels-cHn6O-Kf.js.map +1 -1
- package/dist/globuscomponents/gb-approval-modal.entry.esm.js.map +1 -1
- package/dist/globuscomponents/gb-filter-modal.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-portal.gb-table-header.gb-toggle.gb-toggle-base.entry.esm.js.map +1 -0
- package/dist/globuscomponents/gb-table.entry.esm.js.map +1 -0
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-80902514.entry.js → p-18789dc0.entry.js} +2 -2
- package/dist/globuscomponents/p-18789dc0.entry.js.map +1 -0
- package/dist/globuscomponents/p-7b3bf29c.entry.js +2 -0
- package/dist/globuscomponents/p-7b3bf29c.entry.js.map +1 -0
- package/dist/globuscomponents/{p-1a215393.entry.js → p-9a44bc13.entry.js} +2 -2
- package/dist/globuscomponents/p-9a44bc13.entry.js.map +1 -0
- package/dist/globuscomponents/p-cHn6O-Kf.js.map +1 -1
- package/dist/globuscomponents/p-dbc76ebb.entry.js +2 -0
- package/dist/globuscomponents/p-dbc76ebb.entry.js.map +1 -0
- package/dist/globuscomponents/readme.md +7 -0
- package/dist/types/components/gb-approval-modal/gb-approval-modal.d.ts +2 -0
- package/dist/types/components/gb-input-field/gb-input-field.d.ts +2 -0
- package/dist/types/components/gb-table/gb-table.d.ts +2 -1
- package/dist/types/components.d.ts +23 -7
- package/dist/types/models/reusableModels.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/gb-detail-cell.cjs.entry.js +0 -94
- package/dist/cjs/gb-detail-cell.entry.cjs.js.map +0 -1
- package/dist/components/p-CsyLoHd6.js.map +0 -1
- package/dist/components/p-DQOaeODg.js.map +0 -1
- package/dist/components/p-DtJfuVIF.js.map +0 -1
- package/dist/esm/gb-detail-cell.entry.js +0 -92
- package/dist/esm/gb-detail-cell.entry.js.map +0 -1
- package/dist/globuscomponents/gb-detail-cell.entry.esm.js.map +0 -1
- package/dist/globuscomponents/p-1a215393.entry.js.map +0 -1
- package/dist/globuscomponents/p-80902514.entry.js.map +0 -1
- package/dist/globuscomponents/p-fbf22caa.entry.js +0 -2
- package/dist/globuscomponents/p-fbf22caa.entry.js.map +0 -1
|
@@ -0,0 +1,1238 @@
|
|
|
1
|
+
import { r as registerInstance, d as createEvent, h, a as getAssetPath, F as Fragment } from './index-Bkubn3IB.js';
|
|
2
|
+
import { S as StateEnum } from './reusableModels-cHn6O-Kf.js';
|
|
3
|
+
|
|
4
|
+
const gbTableCss = "@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n/**\r\n * Global styles for portal-based dropdowns\r\n * Applied outside shadow DOM context\r\n */\r\n.portal_dropdown_wrapper {\r\n width: -moz-fit-content;\r\n width: fit-content;\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-md);\r\n position: absolute;\r\n z-index: 9999; /* High z-index to appear above sticky columns */\r\n overflow: hidden;\r\n}\r\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\r\n display: block;\r\n width: 100%;\r\n}\r\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n} */\r\n/* @import 'tailwind.css'; */\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 --yellow-25: #fffcf5;\r\n --yellow-50: #fffaeb;\r\n --yellow-100: #fef0c7;\r\n --yellow-200: #fedf89;\r\n --yellow-300: #fec84b;\r\n --yellow-400: #fdb022;\r\n --yellow-500: #f79009;\r\n --yellow-600: #dc6803;\r\n --yellow-700: #b54708;\r\n --yellow-800: #93370d;\r\n --yellow-900: #7a2e0e;\r\n --yellow-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --green-25: #f6fef9;\r\n --green-50: #ecfdf3;\r\n --green-100: #dcfaeb;\r\n --green-200: #a9efc5;\r\n --green-300: #75e0a7;\r\n --green-400: #47cd89;\r\n --green-500: #17b26a;\r\n --green-600: #067f48;\r\n --green-700: #067647;\r\n --green-800: #085d3a;\r\n --green-900: #074d31;\r\n --green-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 /* Light-theme defaults so external hosts still resolve key tokens when data-theme is not set. */\r\n --color-text-bold: var(--gray-800);\r\n --color-text: var(--gray-600);\r\n --color-text-subtle: var(--gray-500);\r\n --color-text-disabled: var(--gray-400);\r\n --color-text-inverse: var(--base-white);\r\n\r\n --color-icon-bold: var(--gray-800);\r\n --color-icon: var(--gray-600);\r\n --color-icon-subtle: var(--gray-500);\r\n --color-icon-disabled: var(--gray-400);\r\n --color-icon-inverse: var(--base-white);\r\n\r\n --color-border-bold: var(--gray-500);\r\n --color-border: var(--gray-400);\r\n --color-border-subtle: var(--gray-300);\r\n --color-border-subtler: var(--gray-200);\r\n --color-border-disabled: var(--gray-200);\r\n --color-border-input: var(--gray-300);\r\n --color-border-focus: var(--gray-400);\r\n\r\n --color-background: var(--base-white);\r\n --color-background-card-bold: var(--gray-100);\r\n --color-background-card: var(--base-white);\r\n --color-background-input: var(--gray-400);\r\n --color-background-disabled: var(--gray-50);\r\n --color-background-btn-disabled: var(--gray-100);\r\n --color-background-selected: var(--blue-500);\r\n\r\n --color-link: var(--blue-500);\r\n --color-link-pressed: var(--blue-600);\r\n --color-link-visited: var(--lightBlue-600);\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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--yellow-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--yellow-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--green-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--green-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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--green-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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--yellow-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--yellow-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--yellow-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--yellow-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--green-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--green-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--green-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--green-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--green-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-bolder: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bolder: 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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--yellow-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--yellow-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--yellow-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--yellow-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--yellow-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--yellow-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--yellow-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--green-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--green-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--green-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--green-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--green-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--green-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--green-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/* -----------------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.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\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.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\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 --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/* Typography Styles */\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/* 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/* 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.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.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\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.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\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.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\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.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\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.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\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.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\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.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\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.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\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.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\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.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\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.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\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.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\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.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\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.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\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.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\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.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\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.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\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.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\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.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\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.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\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.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\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.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\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.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\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.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\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.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\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.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\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.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\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.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\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.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\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.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\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.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\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.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\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.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\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.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\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.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\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.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\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.table_wrapper {\r\n width: 100%;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n}\r\n.table_wrapper.list {\r\n border-radius: var(--rounded-md);\r\n border: 0.7px solid var(--color-border-subtler, #e3e8ef);\r\n box-shadow: var(--shadow-xs);\r\n background: var(--color-background-card, #ffffff);\r\n}\r\n/* .table_wrapper table th:first-child,\r\n.table_wrapper table td:first-child {\r\n position: sticky;\r\n left: 0;\r\n background: white;\r\n z-index: 2;\r\n } */\r\ngb-table-header {\r\n /* position: sticky;\r\n top: 0;\r\n z-index: 9; */\r\n background: var(--color-background-card, #ffffff);\r\n}\r\n.table-header.grid {\r\n overflow-y: visible;\r\n border-radius: var(--rounded-md);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n.table_scroll {\r\n width: 100%;\r\n overflow-x: auto; /* horizontal scroll */\r\n}\r\ntable {\r\n width: 100%;\r\n border-collapse: collapse;\r\n min-width: -moz-max-content;\r\n min-width: max-content;\r\n background: var(--color-background-card, #ffffff);\r\n}\r\ntable.scrollable {\r\n table-layout: fixed;\r\n}\r\nthead {\r\n width: 100%;\r\n}\r\n.table_head_row {\r\n width: 100%;\r\n border-bottom: 1px solid var(--color-border-subtle, #cdd5df);\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n.table_head_row th {\r\n padding: 0.75rem 1.5rem;\r\n}\r\n.table_head_row th.checkbox,\r\n.table_body .table_detail.checkbox {\r\n width: 16px !important;\r\n padding: 0.75rem 0 0.75rem 1.5rem;\r\n}\r\n.table_header_gray {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n.table_header_blue {\r\n background: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n.table_head_content {\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.align_left {\r\n flex-direction: row;\r\n}\r\n.align_right {\r\n flex-direction: row-reverse;\r\n}\r\n.head_text,\r\n.body_text {\r\n color: var(--color-text, #4b5565);\r\n}\r\n.head_text.sortable:hover {\r\n color: var(--color-text-bold, #202939);\r\n}\r\n.table_header_gray.sortable:hover{\r\n background: var(--color-background-gray-subtle, #e3e8ef);\r\n}\r\n.table_head_icons {\r\n display: flex;\r\n gap: var(--spacing-1);\r\n}\r\n.body_text {\r\n width: 100%;\r\n}\r\n.body_text.text_truncate {\r\n display: block;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n.table_detail.cell_truncate {\r\n max-width: 0;\r\n overflow: hidden;\r\n}\r\n.text_and_supporting_text {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n}\r\n.primary p {\r\n color: var(--color-text, #4b5565);\r\n}\r\n.supporting p {\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n.avatar_cell{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n align-items: center;\r\n}\r\n.table_body:hover,\r\n.table_body:hover .table_detail.sticky_left,\r\n.table_body:hover .table_detail.sticky_right {\r\n background: var(--color-background-gray-subtlest, #f6f8fa);\r\n cursor: pointer;\r\n}\r\n.table_body .table_detail {\r\n max-height: 4.5rem;\r\n padding: 1rem 1.5rem;\r\n border-bottom: 1px solid var(--color-border-disabled, #e3e8ef);\r\n}\r\n.sticky_left {\r\n position: sticky;\r\n left: 0;\r\n z-index: 3;\r\n}\r\n.sticky_right {\r\n position: sticky;\r\n right: 0;\r\n z-index: 3;\r\n}\r\n.table_detail.sticky_left,\r\n.table_detail.sticky_right {\r\n background: var(--color-background-card, #ffffff);\r\n}\r\ntable th.has_border.sticky_left::after,\r\ntable .table_detail.has_border.sticky_left::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 4px;\r\n height: 100%;\r\n box-shadow: 2px 0 2px var(--color-border-subtle, #cdd5df);\r\n pointer-events: none;\r\n}\r\n.actions_cell.has_border.sticky_right::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 4px;\r\n height: 100%;\r\n box-shadow: -2px 0 2px var(--color-border-subtle, #cdd5df);\r\n pointer-events: none;\r\n}\r\n.empty_div {\r\n height: 100%;\r\n width: 70px;\r\n}\r\n#dropdown_button {\r\n position: relative;\r\n}\r\n.action_buttons {\r\n display: flex;\r\n gap: var(--spacing-2);\r\n}\r\n/* Overlay */\r\n.filter_modal_wrapper {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n background: var(--color-blanket-subtle, rgba(33, 44, 101, 0.3));\r\n\r\n /* Backgroun Blur/Bg blur sm */\r\n backdrop-filter: blur(4px);\r\n display: flex;\r\n justify-content: flex-end; /* align modal to right */\r\n opacity: 0;\r\n transition:\r\n transform 0.3s ease,\r\n opacity 0.3s ease;\r\n z-index: 1000;\r\n}\r\n/* Modal Panel */\r\n.filter_modal {\r\n /* transform: translateX(100%); */\r\n transition: transform 0.3s ease-in-out;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n.filter_modal_wrapper.open {\r\n transform: translateX(0);\r\n opacity: 1;\r\n}\r\n.filter_modal_wrapper.closing {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n}\r\n/* Grid View Styles */\r\n.table_grid_wrapper {\r\n display: flex;\r\n padding: var(--spacing-5) 0;\r\n justify-content: center;\r\n align-items: center;\r\n align-content: center;\r\n gap: 1.5rem var(--spacing-6);\r\n align-self: stretch;\r\n flex-wrap: wrap;\r\n opacity: 1;\r\n}\r\n.table_grid_card {\r\n position: relative;\r\n display: flex;\r\n min-width: 21.25rem;\r\n max-width: 21.875rem;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n flex: 1 0 0;\r\n border-radius: var(--rounded-md);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-card, #ffffff);\r\n overflow: hidden;\r\n}\r\n.grid_card_profile {\r\n display: flex;\r\n padding: 0 var(--spacing-5);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0.5rem;\r\n align-self: stretch;\r\n}\r\n.grid_card_profile_content {\r\n display: flex;\r\n padding: var(--spacing-5) var(--spacing-none);\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n.profile_details {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-3);\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n.profile_name p {\r\n color: var(--color-text-bold, #202939);\r\n}\r\n.profile_badges {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n align-self: stretch;\r\n}\r\n.grid_card_buttons {\r\n display: flex;\r\n padding: var(--spacing-5);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n}\r\n.btn {\r\n flex: 1 0 0;\r\n}\r\n.grid_dropdown_modal_overlay {\r\n display: flex;\r\n justify-content: flex-end;\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n background: var(--color-blanket-subtler, rgba(33, 44, 101, 0.4));\r\n transition:\r\n transform 0.3s ease,\r\n opacity 0.3s ease;\r\n overflow: hidden;\r\n backdrop-filter: blur(4px);\r\n opacity: 0;\r\n}\r\n.grid_dropdown_modal_overlay.open {\r\n transform: translateX(0);\r\n opacity: 1;\r\n}\r\n.grid_dropdown_modal_overlay.closing {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n}\r\n.grid_dropdown_modal {\r\n width: 12.1875rem;\r\n height: 100%;\r\n border-radius: var(--rounded-sm) 0 0 var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-card, #ffffff);\r\n transition: transform 0.3s ease-in-out;\r\n}\r\n.grid_card_modal_close_button {\r\n position: absolute;\r\n left: 0.5rem;\r\n top: 0.5rem;\r\n}\r\n/* Mobile Table View Styles */\r\n.mobile_wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.mobile_card_wrapper {\r\n display: flex;\r\n align-items: flex-start;\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n.mobile-card {\r\n display: flex;\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: var(--spacing-6) var(--spacing-4);\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n}\r\n.mobile_card_wrapper:active {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n.mobile-row {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n}\r\n.mobile-row.left {\r\n gap: var(--spacing-2);\r\n}\r\n.mobile-row.right {\r\n width: -moz-fit-content;\r\n width: fit-content;\r\n align-items: flex-end;\r\n text-align: right;\r\n gap: var(--spacing-2);\r\n}\r\n.mobile-bottom {\r\n align-items: flex-end;\r\n text-align: right;\r\n}\r\n/* .mobile-top .mobile-cell:first-child {\r\n font-weight: 500;\r\n font-size: 16px;\r\n}\r\n\r\n.mobile-top .mobile-cell.right {\r\n font-weight: 600;\r\n font-size: 16px;\r\n} */\r\n.mobile-cell {\r\n min-width: 0;\r\n}\r\n.mobile-cell.right {\r\n display: flex;\r\n justify-content: flex-end;\r\n flex: 1;\r\n text-align: right;\r\n}\r\n.top_left_text,\r\n.top_right_text {\r\n max-width: 100%;\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n min-width: 0;\r\n margin: 0;\r\n color: var(--color-text, #4b5565);\r\n}\r\n.bottom_left_text {\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n.empty_state_wrapper {\r\n display: flex;\r\n padding: 2.5rem 2rem 3rem 2rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n align-self: stretch;\r\n overflow: hidden;\r\n}\r\n/* Column Options Modal Styles */\r\n.dialog {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 9999;\r\n background: var(--color-surface, #ffffff);\r\n width: 23.1875rem;\r\n border-radius: var(--rounded-md);\r\n box-shadow: var(--shadow-sm);\r\n border: 1px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n.content_wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n padding: var(--spacing-5) var(--spacing-6);\r\n align-items: flex-start;\r\n gap: 0.5rem;\r\n align-self: stretch;\r\n}\r\n.modal_header {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n align-self: stretch;\r\n position: relative;\r\n cursor: grab;\r\n}\r\n.modal_header_content {\r\n display: flex;\r\n padding: var(--spacing-5) var(--spacing-6);\r\n align-items: flex-start;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n.heading {\r\n color: var(--color-text-bold, #202939);\r\n}\r\n.close_button {\r\n position: absolute;\r\n right: 0.5rem;\r\n top: 0.5rem;\r\n}\r\n.modal_content {\r\n display: flex;\r\n width: 100%;\r\n padding: 0 0 var(--spacing-none) 0;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n}\r\n.column_option {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n}\r\n.label_and_dragger {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n flex: 1 0 0;\r\n}\r\n.label {\r\n color: var(--color-text, #4b5565);\r\n}\r\n.label_and_dragger svg {\r\n cursor: grab;\r\n}\r\n/* Loading Styles */\r\n.loader {\r\n width: 100%;\r\n}\r\n.skeleton {\r\n animation: skeleton-loading 0.5s linear infinite alternate;\r\n}\r\n@keyframes skeleton-loading {\r\n 0% {\r\n background-color: var(--color-skeleton, #e3e8ef);\r\n }\r\n\r\n 100% {\r\n background-color: var(--color-skeleton-bold, #cdd5df);\r\n }\r\n}\r\n.skeleton-text,\r\n.skeleton-action {\r\n width: 100%;\r\n height: 0.5rem;\r\n margin-bottom: 0.5rem;\r\n border-radius: 0.25rem;\r\n}\r\n.toast {\r\n width: 100%;\r\n max-width: 700px;\r\n padding: 0 var(--spacing-5);\r\n left: 50%;\r\n z-index: 10000;\r\n position: fixed;\r\n transform: translate(-50%, -50%);\r\n bottom: -100px; /* Start off-screen */\r\n transition: bottom 0.3s ease-in-out; /* Smooth animation */\r\n}\r\n.toast.visible {\r\n bottom: 24px;\r\n}";
|
|
5
|
+
|
|
6
|
+
const GbTable = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.rowActionClicked = createEvent(this, "rowActionClicked");
|
|
10
|
+
this.pageItemSelected = createEvent(this, "pageItemSelected");
|
|
11
|
+
this.selectionChanged = createEvent(this, "selectionChanged");
|
|
12
|
+
this.inputValueChanged = createEvent(this, "inputValueChanged");
|
|
13
|
+
this.dateChange = createEvent(this, "dateChange");
|
|
14
|
+
this.exportClicked = createEvent(this, "exportClicked");
|
|
15
|
+
this.refreshButtonClicked = createEvent(this, "refreshButtonClicked");
|
|
16
|
+
this.layoutButtonClicked = createEvent(this, "layoutButtonClicked");
|
|
17
|
+
this.mobileRowClicked = createEvent(this, "mobileRowClicked");
|
|
18
|
+
this.filterApplied = createEvent(this, "filterApplied");
|
|
19
|
+
this.filterCleared = createEvent(this, "filterCleared");
|
|
20
|
+
this.tableControlClicked = createEvent(this, "tableControlClicked");
|
|
21
|
+
this.cellActionFired = createEvent(this, "cellActionFired");
|
|
22
|
+
this.loading = false;
|
|
23
|
+
this.columns = [
|
|
24
|
+
// { key: 'id', label: '#', width: '10rem', sortable: true, sortType: 'string', truncate: true, mobile: { position: 'top_left' } },
|
|
25
|
+
// { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
|
|
26
|
+
// {
|
|
27
|
+
// key: 'name',
|
|
28
|
+
// label: 'Name',
|
|
29
|
+
// sortable: true,
|
|
30
|
+
// sortType: 'string',
|
|
31
|
+
// helpIcon: true,
|
|
32
|
+
// searchable: true,
|
|
33
|
+
// hasAvatar: true,
|
|
34
|
+
// cellAvatar: {
|
|
35
|
+
// // image: '',
|
|
36
|
+
// slots: {
|
|
37
|
+
// // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),
|
|
38
|
+
// image: row => row.image,
|
|
39
|
+
// },
|
|
40
|
+
// },
|
|
41
|
+
// mobile: { position: 'top_right' },
|
|
42
|
+
// },
|
|
43
|
+
// { key: 'role', label: 'Role', searchable: true },
|
|
44
|
+
// { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },
|
|
45
|
+
// {
|
|
46
|
+
// key: 'status',
|
|
47
|
+
// label: 'Status',
|
|
48
|
+
// cellComponent: 'gb-button',
|
|
49
|
+
// cellProps: row => ({
|
|
50
|
+
// hierarchy: 'link_gray',
|
|
51
|
+
// size: 'md',
|
|
52
|
+
// icon: 'default',
|
|
53
|
+
// iconLeading: true,
|
|
54
|
+
// iconLeadingSwap: 'assets/view.svg'
|
|
55
|
+
// }),
|
|
56
|
+
// cellEvent: 'buttonClicked',
|
|
57
|
+
// cellSlots: {
|
|
58
|
+
// default: {
|
|
59
|
+
// tag: 'p',
|
|
60
|
+
// content: row => row.status,
|
|
61
|
+
// },
|
|
62
|
+
// },
|
|
63
|
+
// },
|
|
64
|
+
];
|
|
65
|
+
this.data = [
|
|
66
|
+
// {
|
|
67
|
+
// id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
|
|
68
|
+
// date: 'Jan 1, 2022',
|
|
69
|
+
// name: 'Emma Johnson',
|
|
70
|
+
// role: 'Frontend Developer',
|
|
71
|
+
// level: 'Today',
|
|
72
|
+
// customer: 'John Doe',
|
|
73
|
+
// amount: '$120.00',
|
|
74
|
+
// status: 'Completed',
|
|
75
|
+
// },
|
|
76
|
+
// {
|
|
77
|
+
// id: '#3002',
|
|
78
|
+
// date: new Date(),
|
|
79
|
+
// name: 'Emmanuel Kadiri',
|
|
80
|
+
// role: 'Backend Developer',
|
|
81
|
+
// level: 'Today',
|
|
82
|
+
// customer: 'Sarah Wilson',
|
|
83
|
+
// amount: '$85.50',
|
|
84
|
+
// status: 'Pending',
|
|
85
|
+
// image: 'https://i.pravatar.cc/150?img=1',
|
|
86
|
+
// },
|
|
87
|
+
// {
|
|
88
|
+
// id: '#3003',
|
|
89
|
+
// date: new Date(),
|
|
90
|
+
// name: 'Liam Smith',
|
|
91
|
+
// role: 'Frontend Developer',
|
|
92
|
+
// level: 'Today',
|
|
93
|
+
// customer: 'Sarah Wilson',
|
|
94
|
+
// amount: '$85.50',
|
|
95
|
+
// status: 'Pending',
|
|
96
|
+
// image: 'https://i.pravatar.cc/150?img=2',
|
|
97
|
+
// },
|
|
98
|
+
// {
|
|
99
|
+
// id: '#3004',
|
|
100
|
+
// date: new Date(),
|
|
101
|
+
// name: 'Liam Smith',
|
|
102
|
+
// role: 'Backend Developer',
|
|
103
|
+
// level: 'Today',
|
|
104
|
+
// customer: 'Sarah Wilson',
|
|
105
|
+
// amount: '$85.50',
|
|
106
|
+
// status: 'Pending',
|
|
107
|
+
// image: 'https://i.pravatar.cc/150?img=3',
|
|
108
|
+
// },
|
|
109
|
+
// {
|
|
110
|
+
// id: '#3005',
|
|
111
|
+
// date: new Date(),
|
|
112
|
+
// name: 'Liam Smith',
|
|
113
|
+
// role: 'Backend Developer',
|
|
114
|
+
// level: 'Today',
|
|
115
|
+
// customer: 'Sarah Wilson',
|
|
116
|
+
// amount: '$85.50',
|
|
117
|
+
// status: 'Pending',
|
|
118
|
+
// image: 'https://i.pravatar.cc/150?img=4',
|
|
119
|
+
// },
|
|
120
|
+
// {
|
|
121
|
+
// id: '#3006',
|
|
122
|
+
// date: new Date(),
|
|
123
|
+
// name: 'Liam Smith',
|
|
124
|
+
// role: 'Backend Developer',
|
|
125
|
+
// level: 'Today',
|
|
126
|
+
// customer: 'Sarah Wilson',
|
|
127
|
+
// amount: '$85.50',
|
|
128
|
+
// status: 'Pending',
|
|
129
|
+
// image: 'https://i.pravatar.cc/150?img=5',
|
|
130
|
+
// },
|
|
131
|
+
// {
|
|
132
|
+
// id: '#3003',
|
|
133
|
+
// date: 'Jan 3, 2022',
|
|
134
|
+
// name: 'Olivia Brown',
|
|
135
|
+
// role: 'UI Designer',
|
|
136
|
+
// level: 'Today',
|
|
137
|
+
// customer: 'Michael Lee',
|
|
138
|
+
// amount: '$230.75',
|
|
139
|
+
// status: 'Cancelled',
|
|
140
|
+
// image: 'https://i.pravatar.cc/150?img=6',
|
|
141
|
+
// },
|
|
142
|
+
// {
|
|
143
|
+
// id: '#3004',
|
|
144
|
+
// date: 'Jan 4, 2022',
|
|
145
|
+
// name: 'Noah Davis',
|
|
146
|
+
// role: 'DevOps Engineer',
|
|
147
|
+
// level: 'Today',
|
|
148
|
+
// customer: 'Emily Clark',
|
|
149
|
+
// amount: '$59.99',
|
|
150
|
+
// status: 'Completed',
|
|
151
|
+
// image: 'https://i.pravatar.cc/150?img=7',
|
|
152
|
+
// },
|
|
153
|
+
// {
|
|
154
|
+
// id: '#3005',
|
|
155
|
+
// date: 'Jan 5, 2022',
|
|
156
|
+
// name: 'Ava Martinez',
|
|
157
|
+
// role: 'Product Manager',
|
|
158
|
+
// level: 'Today',
|
|
159
|
+
// customer: 'Daniel Harris',
|
|
160
|
+
// amount: '$410.00',
|
|
161
|
+
// status: 'Pending',
|
|
162
|
+
// image: 'https://i.pravatar.cc/150?img=8',
|
|
163
|
+
// },
|
|
164
|
+
// {
|
|
165
|
+
// id: '#3006',
|
|
166
|
+
// date: 'Jan 6, 2022',
|
|
167
|
+
// name: 'William Garcia',
|
|
168
|
+
// role: 'QA Engineer',
|
|
169
|
+
// level: 'Today',
|
|
170
|
+
// customer: 'Sophia Lewis',
|
|
171
|
+
// amount: '$150.20',
|
|
172
|
+
// status: 'Completed',
|
|
173
|
+
// image: 'https://i.pravatar.cc/150?img=9',
|
|
174
|
+
// },
|
|
175
|
+
// {
|
|
176
|
+
// id: '#3007',
|
|
177
|
+
// date: 'Jan 7, 2022',
|
|
178
|
+
// name: 'Isabella Rodriguez',
|
|
179
|
+
// role: 'Business Analyst',
|
|
180
|
+
// level: 'Today',
|
|
181
|
+
// customer: 'James Walker',
|
|
182
|
+
// amount: '$78.40',
|
|
183
|
+
// status: 'Pending',
|
|
184
|
+
// image: 'https://i.pravatar.cc/150?img=10',
|
|
185
|
+
// },
|
|
186
|
+
// {
|
|
187
|
+
// id: '#3008',
|
|
188
|
+
// date: 'Jan 8, 2022',
|
|
189
|
+
// name: 'James Wilson',
|
|
190
|
+
// role: 'Fullstack Developer',
|
|
191
|
+
// level: 'Today',
|
|
192
|
+
// customer: 'Mia Hall',
|
|
193
|
+
// amount: '$300.00',
|
|
194
|
+
// status: 'Completed',
|
|
195
|
+
// image: 'https://i.pravatar.cc/150?img=11',
|
|
196
|
+
// },
|
|
197
|
+
// {
|
|
198
|
+
// id: '#3009',
|
|
199
|
+
// date: 'Jan 9, 2022',
|
|
200
|
+
// name: 'Sophia Anderson',
|
|
201
|
+
// role: 'UX Researcher',
|
|
202
|
+
// level: 'Today',
|
|
203
|
+
// customer: 'Benjamin Allen',
|
|
204
|
+
// amount: '$95.60',
|
|
205
|
+
// status: 'Cancelled',
|
|
206
|
+
// image: 'https://i.pravatar.cc/150?img=12',
|
|
207
|
+
// },
|
|
208
|
+
// {
|
|
209
|
+
// id: '#3010',
|
|
210
|
+
// date: 'Jan 10, 2022',
|
|
211
|
+
// name: 'Benjamin Thomas',
|
|
212
|
+
// role: 'Mobile Developer',
|
|
213
|
+
// level: 'Today',
|
|
214
|
+
// customer: 'Charlotte Young',
|
|
215
|
+
// amount: '$210.10',
|
|
216
|
+
// status: 'Completed',
|
|
217
|
+
// image: 'https://i.pravatar.cc/150?img=13',
|
|
218
|
+
// },
|
|
219
|
+
// {
|
|
220
|
+
// id: '#3011',
|
|
221
|
+
// date: 'Jan 11, 2022',
|
|
222
|
+
// name: 'Mia Taylor',
|
|
223
|
+
// role: 'Data Analyst',
|
|
224
|
+
// level: 'Today',
|
|
225
|
+
// customer: 'Lucas King',
|
|
226
|
+
// amount: '$180.00',
|
|
227
|
+
// status: 'Pending',
|
|
228
|
+
// image: 'https://i.pravatar.cc/150?img=14',
|
|
229
|
+
// },
|
|
230
|
+
// {
|
|
231
|
+
// id: '#3012',
|
|
232
|
+
// date: 'Jan 12, 2022',
|
|
233
|
+
// name: 'Lucas Moore',
|
|
234
|
+
// role: 'Cloud Engineer',
|
|
235
|
+
// level: 'Today',
|
|
236
|
+
// customer: 'Amelia Scott',
|
|
237
|
+
// amount: '$420.75',
|
|
238
|
+
// status: 'Completed',
|
|
239
|
+
// image: 'https://i.pravatar.cc/150?img=15',
|
|
240
|
+
// },
|
|
241
|
+
// {
|
|
242
|
+
// id: '#3013',
|
|
243
|
+
// date: 'Jan 13, 2022',
|
|
244
|
+
// name: 'Charlotte Jackson',
|
|
245
|
+
// role: 'Security Engineer',
|
|
246
|
+
// level: 'Today',
|
|
247
|
+
// customer: 'Elijah Green',
|
|
248
|
+
// amount: '$65.90',
|
|
249
|
+
// status: 'Cancelled',
|
|
250
|
+
// image: 'https://i.pravatar.cc/150?img=16',
|
|
251
|
+
// },
|
|
252
|
+
// {
|
|
253
|
+
// id: '#3014',
|
|
254
|
+
// date: 'Jan 14, 2022',
|
|
255
|
+
// name: 'Elijah Martin',
|
|
256
|
+
// role: 'Technical Lead',
|
|
257
|
+
// level: 'Today',
|
|
258
|
+
// customer: 'Harper Adams',
|
|
259
|
+
// amount: '$510.30',
|
|
260
|
+
// status: 'Completed',
|
|
261
|
+
// image: 'https://i.pravatar.cc/150?img=17',
|
|
262
|
+
// },
|
|
263
|
+
// {
|
|
264
|
+
// id: '#3015',
|
|
265
|
+
// date: 'Jan 15, 2022',
|
|
266
|
+
// name: 'Amelia Lee',
|
|
267
|
+
// role: 'Scrum Master',
|
|
268
|
+
// level: 'Today',
|
|
269
|
+
// customer: 'Alexander Baker',
|
|
270
|
+
// amount: '$99.99',
|
|
271
|
+
// status: 'Pending',
|
|
272
|
+
// image: 'https://i.pravatar.cc/150?img=18',
|
|
273
|
+
// },
|
|
274
|
+
// {
|
|
275
|
+
// id: '#3016',
|
|
276
|
+
// date: 'Jan 16, 2022',
|
|
277
|
+
// name: 'Harper Perez',
|
|
278
|
+
// role: 'Frontend Developer',
|
|
279
|
+
// level: 'Today',
|
|
280
|
+
// customer: 'Ella Nelson',
|
|
281
|
+
// amount: '$275.45',
|
|
282
|
+
// status: 'Completed',
|
|
283
|
+
// image: 'https://i.pravatar.cc/150?img=19',
|
|
284
|
+
// },
|
|
285
|
+
// {
|
|
286
|
+
// id: '#3017',
|
|
287
|
+
// date: 'Jan 17, 2022',
|
|
288
|
+
// name: 'Alexander White',
|
|
289
|
+
// role: 'Backend Developer',
|
|
290
|
+
// level: 'Today',
|
|
291
|
+
// customer: 'Matthew Carter',
|
|
292
|
+
// amount: '$340.00',
|
|
293
|
+
// status: 'Pending',
|
|
294
|
+
// image: 'https://i.pravatar.cc/150?img=20',
|
|
295
|
+
// },
|
|
296
|
+
// {
|
|
297
|
+
// id: '#3018',
|
|
298
|
+
// date: 'Jan 18, 2022',
|
|
299
|
+
// name: 'Ella Harris',
|
|
300
|
+
// role: 'UI Designer',
|
|
301
|
+
// level: 'Today',
|
|
302
|
+
// customer: 'Avery Mitchell',
|
|
303
|
+
// amount: '$88.80',
|
|
304
|
+
// status: 'Completed',
|
|
305
|
+
// image: 'https://i.pravatar.cc/150?img=21',
|
|
306
|
+
// },
|
|
307
|
+
// {
|
|
308
|
+
// id: '#3019',
|
|
309
|
+
// date: 'Jan 19, 2022',
|
|
310
|
+
// name: 'Matthew Clark',
|
|
311
|
+
// role: 'DevOps Engineer',
|
|
312
|
+
// level: 'Today',
|
|
313
|
+
// customer: 'Evelyn Perez',
|
|
314
|
+
// amount: '$190.25',
|
|
315
|
+
// status: 'Cancelled',
|
|
316
|
+
// image: 'https://i.pravatar.cc/150?img=22',
|
|
317
|
+
// },
|
|
318
|
+
// {
|
|
319
|
+
// id: '#3020',
|
|
320
|
+
// date: 'Jan 20, 2022',
|
|
321
|
+
// name: 'Avery Lewis',
|
|
322
|
+
// role: 'Product Manager',
|
|
323
|
+
// level: 'Today',
|
|
324
|
+
// customer: 'Henry Roberts',
|
|
325
|
+
// amount: '$600.00',
|
|
326
|
+
// status: 'Completed',
|
|
327
|
+
// image: 'https://i.pravatar.cc/150?img=23',
|
|
328
|
+
// },
|
|
329
|
+
// {
|
|
330
|
+
// id: '#3021',
|
|
331
|
+
// date: 'Jan 21, 2022',
|
|
332
|
+
// name: 'Evelyn Walker',
|
|
333
|
+
// role: 'QA Engineer',
|
|
334
|
+
// level: 'Today',
|
|
335
|
+
// customer: 'Luna Turner',
|
|
336
|
+
// amount: '$72.30',
|
|
337
|
+
// status: 'Pending',
|
|
338
|
+
// image: 'https://i.pravatar.cc/150?img=24',
|
|
339
|
+
// },
|
|
340
|
+
// {
|
|
341
|
+
// id: '#3022',
|
|
342
|
+
// date: 'Jan 22, 2022',
|
|
343
|
+
// name: 'Henry Hall',
|
|
344
|
+
// role: 'Business Analyst',
|
|
345
|
+
// level: 'Today',
|
|
346
|
+
// customer: 'Jack Phillips',
|
|
347
|
+
// amount: '$310.40',
|
|
348
|
+
// status: 'Completed',
|
|
349
|
+
// image: 'https://i.pravatar.cc/150?img=25',
|
|
350
|
+
// },
|
|
351
|
+
// {
|
|
352
|
+
// id: '#3023',
|
|
353
|
+
// date: 'Jan 23, 2022',
|
|
354
|
+
// name: 'Luna Allen',
|
|
355
|
+
// role: 'Fullstack Developer',
|
|
356
|
+
// level: 'Today',
|
|
357
|
+
// customer: 'Sofia Campbell',
|
|
358
|
+
// amount: '$145.00',
|
|
359
|
+
// status: 'Cancelled',
|
|
360
|
+
// image: 'https://i.pravatar.cc/150?img=26',
|
|
361
|
+
// },
|
|
362
|
+
// {
|
|
363
|
+
// id: '#3024',
|
|
364
|
+
// date: 'Jan 24, 2022',
|
|
365
|
+
// name: 'Jack Young',
|
|
366
|
+
// role: 'UX Researcher',
|
|
367
|
+
// level: 'Today',
|
|
368
|
+
// customer: 'David Parker',
|
|
369
|
+
// amount: '$260.70',
|
|
370
|
+
// status: 'Completed',
|
|
371
|
+
// image: 'https://i.pravatar.cc/150?img=27',
|
|
372
|
+
// },
|
|
373
|
+
// {
|
|
374
|
+
// id: '#3025',
|
|
375
|
+
// date: 'Jan 25, 2022',
|
|
376
|
+
// name: 'Sofia Hernandez',
|
|
377
|
+
// role: 'Mobile Developer',
|
|
378
|
+
// level: 'Today',
|
|
379
|
+
// customer: 'Grace Evans',
|
|
380
|
+
// amount: '$89.10',
|
|
381
|
+
// status: 'Pending',
|
|
382
|
+
// image: 'https://i.pravatar.cc/150?img=28',
|
|
383
|
+
// },
|
|
384
|
+
// {
|
|
385
|
+
// id: '#3026',
|
|
386
|
+
// date: 'Jan 26, 2022',
|
|
387
|
+
// name: 'David King',
|
|
388
|
+
// role: 'Data Analyst',
|
|
389
|
+
// level: 'Today',
|
|
390
|
+
// customer: 'Samuel Edwards',
|
|
391
|
+
// amount: '$410.90',
|
|
392
|
+
// status: 'Completed',
|
|
393
|
+
// image: 'https://i.pravatar.cc/150?img=29',
|
|
394
|
+
// },
|
|
395
|
+
// {
|
|
396
|
+
// id: '#3027',
|
|
397
|
+
// date: 'Jan 27, 2022',
|
|
398
|
+
// name: 'Grace Wright',
|
|
399
|
+
// role: 'Cloud Engineer',
|
|
400
|
+
// level: 'Today',
|
|
401
|
+
// customer: 'Chloe Collins',
|
|
402
|
+
// amount: '$130.55',
|
|
403
|
+
// status: 'Cancelled',
|
|
404
|
+
// image: 'https://i.pravatar.cc/150?img=30',
|
|
405
|
+
// },
|
|
406
|
+
// {
|
|
407
|
+
// id: '#3028',
|
|
408
|
+
// date: 'Jan 28, 2022',
|
|
409
|
+
// name: 'Samuel Scott',
|
|
410
|
+
// role: 'Security Engineer',
|
|
411
|
+
// level: 'Today',
|
|
412
|
+
// customer: 'Victoria Stewart',
|
|
413
|
+
// amount: '$555.00',
|
|
414
|
+
// status: 'Completed',
|
|
415
|
+
// image: 'https://i.pravatar.cc/150?img=31',
|
|
416
|
+
// },
|
|
417
|
+
// {
|
|
418
|
+
// id: '#3029',
|
|
419
|
+
// date: 'Jan 29, 2022',
|
|
420
|
+
// name: 'Chloe Green',
|
|
421
|
+
// role: 'Technical Lead',
|
|
422
|
+
// level: 'Today',
|
|
423
|
+
// customer: 'Nathan Morris',
|
|
424
|
+
// amount: '$205.25',
|
|
425
|
+
// status: 'Pending',
|
|
426
|
+
// image: 'https://i.pravatar.cc/150?img=32',
|
|
427
|
+
// },
|
|
428
|
+
// {
|
|
429
|
+
// id: '#3030',
|
|
430
|
+
// date: 'Jan 30, 2022',
|
|
431
|
+
// name: 'Nathan Adams',
|
|
432
|
+
// role: 'Scrum Master',
|
|
433
|
+
// level: 'Today',
|
|
434
|
+
// customer: 'Zoe Rogers',
|
|
435
|
+
// amount: '$320.80',
|
|
436
|
+
// status: 'Completed',
|
|
437
|
+
// image: 'https://i.pravatar.cc/150?img=33',
|
|
438
|
+
// },
|
|
439
|
+
];
|
|
440
|
+
// = {
|
|
441
|
+
// name: { key: 'name' },
|
|
442
|
+
// badges: [
|
|
443
|
+
// { key: 'role', label: 'Role' },
|
|
444
|
+
// { key: 'amount', label: 'Amount' },
|
|
445
|
+
// ],
|
|
446
|
+
// button: { icon: 'assets/sent.svg', text: 'Send Money', action: 'send_money' },
|
|
447
|
+
// };
|
|
448
|
+
this.tableHeaderConfig = {
|
|
449
|
+
type: 'default',
|
|
450
|
+
tableHeading: false,
|
|
451
|
+
tableHeadingLabel: 'Suspicious outflows',
|
|
452
|
+
showDateFilter: true,
|
|
453
|
+
showFilter: true,
|
|
454
|
+
showColumnOptions: false,
|
|
455
|
+
showSearch: true,
|
|
456
|
+
showExport: true,
|
|
457
|
+
showRefreshButton: false,
|
|
458
|
+
showLayoutToggle: false,
|
|
459
|
+
datePickerMode: 'range',
|
|
460
|
+
inputPlaceholder: 'Transaction reference',
|
|
461
|
+
showEntireData: true,
|
|
462
|
+
};
|
|
463
|
+
// = {
|
|
464
|
+
// paginationMode: 'internal',
|
|
465
|
+
// entriesDropdownMenuPosition: 'top',
|
|
466
|
+
// currentPage: 1,
|
|
467
|
+
// pageSize: 10,
|
|
468
|
+
// };
|
|
469
|
+
this.emptyStateConfig = {
|
|
470
|
+
size: 'md',
|
|
471
|
+
background: true,
|
|
472
|
+
backgroundType: 'grid',
|
|
473
|
+
mainText: 'No data available',
|
|
474
|
+
supportingText: 'Try adjusting your filters or check back later.',
|
|
475
|
+
color: 'gray',
|
|
476
|
+
illustrationIcon: 'assets/alert-circle.svg',
|
|
477
|
+
illustrationStyle: 'box',
|
|
478
|
+
theme: 'light',
|
|
479
|
+
};
|
|
480
|
+
this.filterConfig = {
|
|
481
|
+
mode: 'internal',
|
|
482
|
+
title: '',
|
|
483
|
+
fields: [
|
|
484
|
+
// {
|
|
485
|
+
// tag: 'gb-date-picker',
|
|
486
|
+
// label: 'Date',
|
|
487
|
+
// columnKey: 'date',
|
|
488
|
+
// key: { start: 'startDate', end: 'endDate' },
|
|
489
|
+
// event: 'dateChange',
|
|
490
|
+
// },
|
|
491
|
+
// {
|
|
492
|
+
// tag: 'gb-input-dropdown',
|
|
493
|
+
// key: 'status',
|
|
494
|
+
// event: 'dropdownItemSelected',
|
|
495
|
+
// props: {
|
|
496
|
+
// type: 'tags',
|
|
497
|
+
// showLabel: true,
|
|
498
|
+
// label: 'Status',
|
|
499
|
+
// placeholder: 'Select a status',
|
|
500
|
+
// items: ['Completed', 'Pending', 'Cancelled'],
|
|
501
|
+
// },
|
|
502
|
+
// },
|
|
503
|
+
// {
|
|
504
|
+
// tag: 'gb-slider',
|
|
505
|
+
// key: 'amount',
|
|
506
|
+
// event: 'thumbValueChanged',
|
|
507
|
+
// props: {
|
|
508
|
+
// showHeading: true,
|
|
509
|
+
// heading: 'Amount range',
|
|
510
|
+
// max: 600,
|
|
511
|
+
// },
|
|
512
|
+
// },
|
|
513
|
+
],
|
|
514
|
+
initialValues: {
|
|
515
|
+
pageNumber: 0,
|
|
516
|
+
pageSize: 10,
|
|
517
|
+
},
|
|
518
|
+
};
|
|
519
|
+
this.showActionsColumn = true;
|
|
520
|
+
this.rowActions = [
|
|
521
|
+
// { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
|
|
522
|
+
// { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
|
|
523
|
+
// { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
|
|
524
|
+
// { action: 'edit', type: 'custom' },
|
|
525
|
+
];
|
|
526
|
+
this.dropdownOptions = [
|
|
527
|
+
// { label: 'Download invalid', action: 'view', icon: 'assets/view.svg', disabled: false },
|
|
528
|
+
// { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },
|
|
529
|
+
// { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: false },
|
|
530
|
+
];
|
|
531
|
+
this.stickyFirstColumn = true;
|
|
532
|
+
this.stickyLastColumn = true;
|
|
533
|
+
this.showCheckbox = false;
|
|
534
|
+
this.tableHeadColor = 'gray';
|
|
535
|
+
this.rowKey = 'id';
|
|
536
|
+
this.tableHeaderType = 'default';
|
|
537
|
+
this.slicedData = [];
|
|
538
|
+
this.internalCurrentPage = 1;
|
|
539
|
+
this.internalPageSize = 10;
|
|
540
|
+
this.openRowIndex = null;
|
|
541
|
+
this.dropdownPlacement = 'bottom-end';
|
|
542
|
+
this.sortDirection = 'asc';
|
|
543
|
+
this.selectedRowIds = new Set();
|
|
544
|
+
this.breakpoint = 'desktop';
|
|
545
|
+
this.isMobile = false;
|
|
546
|
+
this.isScrollable = false;
|
|
547
|
+
this.showColumnsPanel = false;
|
|
548
|
+
this.showFilterModal = false;
|
|
549
|
+
this.modalPosition = { x: 0, y: 0 };
|
|
550
|
+
this.showFilterModalInternal = false;
|
|
551
|
+
this.isFilterModalVisible = false;
|
|
552
|
+
this.isGridModalVisible = false;
|
|
553
|
+
this.internalLoading = false;
|
|
554
|
+
this.currentTableLayout = 'list';
|
|
555
|
+
this.showGridCardModal = false;
|
|
556
|
+
this.appliedFilterValues = {};
|
|
557
|
+
this.searchTerm = '';
|
|
558
|
+
this.showToast = false;
|
|
559
|
+
this.filterMessage = '';
|
|
560
|
+
this.toastVisible = false;
|
|
561
|
+
this.isDraggingModal = false;
|
|
562
|
+
this.dragOffset = { x: 0, y: 0 };
|
|
563
|
+
this.actionButtonRefs = [];
|
|
564
|
+
this.draggedIndex = null;
|
|
565
|
+
this.handlePageChange = ({ detail }) => {
|
|
566
|
+
const { pageNumber, pageSize } = detail;
|
|
567
|
+
// Update these state variables to trigger a re-render
|
|
568
|
+
this.internalPageSize = pageSize;
|
|
569
|
+
this.internalCurrentPage = pageNumber;
|
|
570
|
+
if (this.paginationConfig.paginationMode === 'external') {
|
|
571
|
+
this.pageItemSelected.emit(detail);
|
|
572
|
+
}
|
|
573
|
+
};
|
|
574
|
+
this.onModalPointerDown = (event) => {
|
|
575
|
+
this.isDraggingModal = true;
|
|
576
|
+
this.dragOffset = {
|
|
577
|
+
x: event.clientX - this.modalPosition.x,
|
|
578
|
+
y: event.clientY - this.modalPosition.y,
|
|
579
|
+
};
|
|
580
|
+
window.addEventListener('pointermove', this.onModalPointerMove);
|
|
581
|
+
window.addEventListener('pointerup', this.onModalPointerUp);
|
|
582
|
+
};
|
|
583
|
+
this.onModalPointerMove = (event) => {
|
|
584
|
+
if (!this.isDraggingModal)
|
|
585
|
+
return;
|
|
586
|
+
this.modalPosition = {
|
|
587
|
+
x: event.clientX - this.dragOffset.x,
|
|
588
|
+
y: event.clientY - this.dragOffset.y,
|
|
589
|
+
};
|
|
590
|
+
};
|
|
591
|
+
this.onModalPointerUp = () => {
|
|
592
|
+
this.isDraggingModal = false;
|
|
593
|
+
window.removeEventListener('pointermove', this.onModalPointerMove);
|
|
594
|
+
window.removeEventListener('pointerup', this.onModalPointerUp);
|
|
595
|
+
};
|
|
596
|
+
}
|
|
597
|
+
componentWillLoad() {
|
|
598
|
+
this.initializeColumns(this.columns);
|
|
599
|
+
this.internalLoading = this.loading;
|
|
600
|
+
}
|
|
601
|
+
componentWillRender() {
|
|
602
|
+
this.checkViewport();
|
|
603
|
+
}
|
|
604
|
+
componentDidRender() {
|
|
605
|
+
requestAnimationFrame(() => this.checkScrollability());
|
|
606
|
+
}
|
|
607
|
+
checkViewport() {
|
|
608
|
+
this.isMobile = window.innerWidth <= 900;
|
|
609
|
+
this.checkScrollability();
|
|
610
|
+
}
|
|
611
|
+
checkScrollability() {
|
|
612
|
+
if (!this.scrollContainer)
|
|
613
|
+
return;
|
|
614
|
+
const { scrollWidth, clientWidth } = this.scrollContainer;
|
|
615
|
+
const newScrollable = scrollWidth > clientWidth;
|
|
616
|
+
if (newScrollable !== this.isScrollable) {
|
|
617
|
+
this.isScrollable = newScrollable; // only update if different
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
async handleAction(action, row, disabled) {
|
|
621
|
+
// console.log('Action clicked:', action, row);
|
|
622
|
+
this.rowActionClicked.emit({ action, row, disabled });
|
|
623
|
+
}
|
|
624
|
+
renderCell(col, row) {
|
|
625
|
+
var _a, _b, _c, _d, _e, _f;
|
|
626
|
+
const value = this.getCellValue(col, row);
|
|
627
|
+
const resolvedClass = typeof col.cellClass === 'function' ? col.cellClass(row) : ((_a = col.cellClass) !== null && _a !== void 0 ? _a : '');
|
|
628
|
+
const resolvedStyle = typeof col.cellStyle === 'function' ? col.cellStyle(row) : ((_b = col.cellStyle) !== null && _b !== void 0 ? _b : {});
|
|
629
|
+
const supporting = typeof col.supportingText === 'function' ? col.supportingText(row) : col.supportingText ? row[col.supportingText] : undefined;
|
|
630
|
+
if (col.cellComponent) {
|
|
631
|
+
const Tag = col.cellComponent;
|
|
632
|
+
// resolve props
|
|
633
|
+
const props = typeof col.cellProps === 'function' ? col.cellProps(row) : col.cellProps || {};
|
|
634
|
+
// resolve default slot content
|
|
635
|
+
let defaultSlotContent = null;
|
|
636
|
+
if ((_d = (_c = col.cellSlots) === null || _c === void 0 ? void 0 : _c.default) === null || _d === void 0 ? void 0 : _d.content) {
|
|
637
|
+
const content = col.cellSlots.default.content(row);
|
|
638
|
+
const slotTag = col.cellSlots.default.tag;
|
|
639
|
+
defaultSlotContent = slotTag ? h(slotTag, {}, content) : content;
|
|
640
|
+
}
|
|
641
|
+
// resolve named slots
|
|
642
|
+
const namedSlotElements = [];
|
|
643
|
+
if ((_e = col.cellSlots) === null || _e === void 0 ? void 0 : _e.named) {
|
|
644
|
+
for (const [slotName, slotConfig] of Object.entries(col.cellSlots.named)) {
|
|
645
|
+
const content = slotConfig.content(row);
|
|
646
|
+
const element = h(slotConfig.tag, { slot: slotName }, content);
|
|
647
|
+
namedSlotElements.push(element);
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
// render component with slots
|
|
651
|
+
const allChildren = [defaultSlotContent, ...namedSlotElements].filter(child => child != null);
|
|
652
|
+
// resolve cell event listeners
|
|
653
|
+
const cellEventProps = {};
|
|
654
|
+
if (col.cellEvent) {
|
|
655
|
+
const events = Array.isArray(col.cellEvent) ? col.cellEvent : [col.cellEvent];
|
|
656
|
+
for (const eventName of events) {
|
|
657
|
+
const propKey = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
|
|
658
|
+
cellEventProps[propKey] = () => {
|
|
659
|
+
console.log({ row });
|
|
660
|
+
this.cellActionFired.emit({ row });
|
|
661
|
+
};
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
return h(Tag, Object.assign(Object.assign({}, props), cellEventProps), allChildren.length > 0 ? allChildren : undefined);
|
|
665
|
+
}
|
|
666
|
+
// if (!value && col.supportingText) {
|
|
667
|
+
// const primary = row[col.key];
|
|
668
|
+
// const supporting = typeof col.supportingText === 'function' ? col.supportingText(row) : col.supportingText ? row[col.supportingText] : undefined;
|
|
669
|
+
// return (
|
|
670
|
+
// <div class="text_and_supporting_text">
|
|
671
|
+
// <div class="primary">
|
|
672
|
+
// <p class="text-sm-medium">{primary}</p>
|
|
673
|
+
// </div>
|
|
674
|
+
// {supporting && (
|
|
675
|
+
// <div class="supporting">
|
|
676
|
+
// <p class="text-xs-regular">{supporting}</p>
|
|
677
|
+
// </div>
|
|
678
|
+
// )}
|
|
679
|
+
// </div>
|
|
680
|
+
// );
|
|
681
|
+
// }
|
|
682
|
+
if (col.splitCell) {
|
|
683
|
+
const leftVal = col.splitCell.left(row);
|
|
684
|
+
const rightVal = col.splitCell.right(row);
|
|
685
|
+
const separator = (_f = col.splitCell.separator) !== null && _f !== void 0 ? _f : '/';
|
|
686
|
+
const leftStyle = col.splitCell.leftStyle ? col.splitCell.leftStyle(row) : {};
|
|
687
|
+
const rightStyle = col.splitCell.rightStyle ? col.splitCell.rightStyle(row) : {};
|
|
688
|
+
return (h("p", { class: "body_text text-sm-regular" }, h("span", { style: leftStyle }, leftVal), h("span", null, separator), h("span", { style: rightStyle }, rightVal)));
|
|
689
|
+
}
|
|
690
|
+
if (col.hasAvatar) {
|
|
691
|
+
const avatarInitials = typeof col.cellAvatar.slots.initials === 'function' ? col.cellAvatar.slots.initials(row) : col.cellAvatar.slots.initials;
|
|
692
|
+
const avatarImage = typeof col.cellAvatar.slots.image === 'function' ? getAssetPath(col.cellAvatar.slots.image(row)) : getAssetPath(col.cellAvatar.slots.image);
|
|
693
|
+
return (h("div", { class: "avatar_cell" }, h("gb-avatar", { size: "sm", text: avatarInitials ? true : avatarImage ? false : null, "show-border": "false" }, h("h1", { slot: "initials" }, avatarInitials), h("img", { slot: "image", src: avatarImage })), h("p", { class: `body_text text-sm-regular ${col.truncate ? 'text_truncate' : ''} ${resolvedClass}`, style: resolvedStyle, title: col.truncate ? String(value !== null && value !== void 0 ? value : '') : undefined }, value)));
|
|
694
|
+
}
|
|
695
|
+
return (h(Fragment, null, h("p", { class: `body_text text-sm-regular ${col.truncate ? 'text_truncate' : ''} ${resolvedClass}`, style: resolvedStyle, title: col.truncate ? String(value !== null && value !== void 0 ? value : '') : undefined }, value), supporting && (h("div", { class: "supporting" }, h("p", { class: "text-xs-regular" }, supporting)))));
|
|
696
|
+
}
|
|
697
|
+
getCellValue(col, row) {
|
|
698
|
+
if (col.value) {
|
|
699
|
+
return col.value(row);
|
|
700
|
+
}
|
|
701
|
+
return row[col.key];
|
|
702
|
+
}
|
|
703
|
+
async toggleDropdown(rowIndex) {
|
|
704
|
+
if (this.openRowIndex === rowIndex) {
|
|
705
|
+
this.openRowIndex = null;
|
|
706
|
+
return;
|
|
707
|
+
}
|
|
708
|
+
const buttonInstance = this.actionButtonRefs[rowIndex];
|
|
709
|
+
const nativeBtn = await (buttonInstance === null || buttonInstance === void 0 ? void 0 : buttonInstance.getNativeButton());
|
|
710
|
+
this.currentAnchorEl = nativeBtn !== null && nativeBtn !== void 0 ? nativeBtn : undefined;
|
|
711
|
+
this.openRowIndex = rowIndex;
|
|
712
|
+
// Calculate available space for dropdown positioning
|
|
713
|
+
requestAnimationFrame(() => this.calculateDropdownPlacement(nativeBtn, this.dropdownRef));
|
|
714
|
+
}
|
|
715
|
+
openGridModal(rowIndex) {
|
|
716
|
+
this.openRowIndex = rowIndex;
|
|
717
|
+
this.isGridModalVisible = true;
|
|
718
|
+
requestAnimationFrame(() => {
|
|
719
|
+
this.isGridModalVisible = true;
|
|
720
|
+
});
|
|
721
|
+
}
|
|
722
|
+
closeGridModal() {
|
|
723
|
+
this.openRowIndex = null;
|
|
724
|
+
this.isGridModalVisible = false;
|
|
725
|
+
setTimeout(() => {
|
|
726
|
+
this.showFilterModalInternal = false;
|
|
727
|
+
}, 300);
|
|
728
|
+
}
|
|
729
|
+
calculateDropdownPlacement(buttonElement, dropdownElement) {
|
|
730
|
+
if (!buttonElement || !dropdownElement)
|
|
731
|
+
return;
|
|
732
|
+
const buttonRect = buttonElement.getBoundingClientRect();
|
|
733
|
+
const tableRect = this.scrollContainer.getBoundingClientRect();
|
|
734
|
+
const dropdownHeight = requestAnimationFrame(() => dropdownElement.scrollHeight);
|
|
735
|
+
// Space within the TABLE, not viewport
|
|
736
|
+
const spaceBelow = tableRect.bottom - buttonRect.bottom;
|
|
737
|
+
const spaceAbove = buttonRect.top - tableRect.top;
|
|
738
|
+
if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
|
|
739
|
+
this.dropdownPlacement = 'top-end';
|
|
740
|
+
}
|
|
741
|
+
else {
|
|
742
|
+
this.dropdownPlacement = 'bottom-end';
|
|
743
|
+
}
|
|
744
|
+
}
|
|
745
|
+
onSort(col) {
|
|
746
|
+
if (!col.sortable)
|
|
747
|
+
return;
|
|
748
|
+
if (this.sortKey === col.key) {
|
|
749
|
+
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
|
750
|
+
}
|
|
751
|
+
else {
|
|
752
|
+
this.sortKey = col.key;
|
|
753
|
+
this.sortDirection = 'asc';
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
get sortedData() {
|
|
757
|
+
if (!this.sortKey)
|
|
758
|
+
return this.data;
|
|
759
|
+
const col = this.internalColumns.find(c => c.key === this.sortKey);
|
|
760
|
+
if (!col)
|
|
761
|
+
return this.data;
|
|
762
|
+
return [...this.data].sort((a, b) => {
|
|
763
|
+
let valA = col.value ? col.value(a) : a[this.sortKey];
|
|
764
|
+
let valB = col.value ? col.value(b) : b[this.sortKey];
|
|
765
|
+
// Null safety
|
|
766
|
+
if (valA == null)
|
|
767
|
+
return 1;
|
|
768
|
+
if (valB == null)
|
|
769
|
+
return -1;
|
|
770
|
+
let result = 0;
|
|
771
|
+
switch (col.sortType) {
|
|
772
|
+
case 'number': {
|
|
773
|
+
const numA = Number(String(valA).replace(/[^0-9.-]+/g, ''));
|
|
774
|
+
const numB = Number(String(valB).replace(/[^0-9.-]+/g, ''));
|
|
775
|
+
result = numA - numB;
|
|
776
|
+
break;
|
|
777
|
+
}
|
|
778
|
+
case 'date': {
|
|
779
|
+
const timeA = new Date(valA).getTime();
|
|
780
|
+
const timeB = new Date(valB).getTime();
|
|
781
|
+
result = timeA - timeB;
|
|
782
|
+
break;
|
|
783
|
+
}
|
|
784
|
+
case 'string':
|
|
785
|
+
default: {
|
|
786
|
+
result = String(valA).localeCompare(String(valB), undefined, {
|
|
787
|
+
sensitivity: 'base',
|
|
788
|
+
});
|
|
789
|
+
break;
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
return this.sortDirection === 'asc' ? result : -result;
|
|
793
|
+
});
|
|
794
|
+
}
|
|
795
|
+
get allSelected() {
|
|
796
|
+
return this.displayedData.length > 0 && this.displayedData.every(row => this.selectedRowIds.has(this.getRowId(row)));
|
|
797
|
+
}
|
|
798
|
+
get allDataSelected() {
|
|
799
|
+
return this.sortedData.length > 0 && this.sortedData.every(row => this.selectedRowIds.has(this.getRowId(row)));
|
|
800
|
+
}
|
|
801
|
+
get isIndeterminate() {
|
|
802
|
+
const someOnPage = this.displayedData.some(row => this.selectedRowIds.has(this.getRowId(row)));
|
|
803
|
+
return (someOnPage || this.selectedRowIds.size > 0) && !this.allSelected;
|
|
804
|
+
}
|
|
805
|
+
getRowId(row) {
|
|
806
|
+
if (typeof this.rowKey === 'function') {
|
|
807
|
+
return this.rowKey(row);
|
|
808
|
+
}
|
|
809
|
+
return row[this.rowKey];
|
|
810
|
+
}
|
|
811
|
+
toggleAll() {
|
|
812
|
+
if (this.allDataSelected) {
|
|
813
|
+
// Uncheck everything
|
|
814
|
+
this.selectedRowIds = new Set();
|
|
815
|
+
}
|
|
816
|
+
else {
|
|
817
|
+
// Check all rows across all pages
|
|
818
|
+
const updated = new Set(this.selectedRowIds);
|
|
819
|
+
this.sortedData.forEach(row => updated.add(this.getRowId(row)));
|
|
820
|
+
this.selectedRowIds = updated;
|
|
821
|
+
}
|
|
822
|
+
this.emitSelection();
|
|
823
|
+
}
|
|
824
|
+
toggleRow(row) {
|
|
825
|
+
const updated = new Set(this.selectedRowIds);
|
|
826
|
+
if (updated.has(this.getRowId(row))) {
|
|
827
|
+
updated.delete(this.getRowId(row));
|
|
828
|
+
}
|
|
829
|
+
else {
|
|
830
|
+
updated.add(this.getRowId(row));
|
|
831
|
+
}
|
|
832
|
+
this.selectedRowIds = updated;
|
|
833
|
+
this.emitSelection();
|
|
834
|
+
}
|
|
835
|
+
emitSelection() {
|
|
836
|
+
const selected = this.sortedData.filter(row => this.selectedRowIds.has(this.getRowId(row)));
|
|
837
|
+
this.selectionChanged.emit(selected);
|
|
838
|
+
}
|
|
839
|
+
get displayedData() {
|
|
840
|
+
if (!this.paginationConfig || this.paginationConfig.paginationMode === 'external') {
|
|
841
|
+
return this.searchedData;
|
|
842
|
+
}
|
|
843
|
+
const start = (this.internalCurrentPage - 1) * this.internalPageSize;
|
|
844
|
+
const end = start + this.internalPageSize;
|
|
845
|
+
return this.searchedData.slice(start, end);
|
|
846
|
+
}
|
|
847
|
+
get totalPages() {
|
|
848
|
+
// console.log('sortedData length:', this.sortedData.length);
|
|
849
|
+
// console.log('internalPageSize:', this.internalPageSize);
|
|
850
|
+
// console.log('paginationMode:', this.paginationConfig?.paginationMode);
|
|
851
|
+
var _a;
|
|
852
|
+
if (!this.paginationConfig)
|
|
853
|
+
return 1;
|
|
854
|
+
const pageSize = this.internalPageSize || 1;
|
|
855
|
+
const totalItems = this.paginationConfig.paginationMode === 'internal' ? this.searchedData.length : ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
|
|
856
|
+
return Math.max(1, Math.ceil(totalItems / pageSize));
|
|
857
|
+
}
|
|
858
|
+
onDataChange() {
|
|
859
|
+
if (this.paginationConfig.paginationMode === 'internal') {
|
|
860
|
+
this.internalCurrentPage = 1;
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
handlePaginationConfigChange(newValue) {
|
|
864
|
+
if (newValue) {
|
|
865
|
+
if (newValue.pageSize !== undefined) {
|
|
866
|
+
this.internalPageSize = newValue.pageSize;
|
|
867
|
+
}
|
|
868
|
+
if (newValue.paginationMode === 'external' && newValue.currentPage) {
|
|
869
|
+
this.internalCurrentPage = newValue.currentPage;
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
onLoadingChange(newValue, _oldValue) {
|
|
874
|
+
this.internalLoading = newValue;
|
|
875
|
+
}
|
|
876
|
+
renderHeaderIcons(col) {
|
|
877
|
+
return (h(Fragment, null, col.sortable && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: {
|
|
878
|
+
transform: this.sortKey === col.key && this.sortDirection === 'desc' ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
879
|
+
transition: 'transform 0.2s ease',
|
|
880
|
+
} }, h("path", { d: "M7.99998 13.3332V2.6665M7.99998 13.3332C8.87837 13.3332 11.3333 9.99993 11.3333 9.99993M7.99998 13.3332C7.12158 13.3332 4.66663 9.9999 4.66663 9.9999", stroke: this.sortKey === col.key ? 'var(--color-icon, #4B5565)' : 'var(--color-icon-disabled, #808c9e)', "stroke-linecap": "round", "stroke-linejoin": "round" }))), col.helpIcon && (h("gb-help-tooltip", { "show-supporting-text": "true" }, h("p", { slot: "label" }, "This is a label"), h("p", { slot: "supporting_text" }, "This is a supporting text")))));
|
|
881
|
+
}
|
|
882
|
+
validateMobilePositions(newCols) {
|
|
883
|
+
const positions = this.internalColumns.map(c => { var _a; return (_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position; }).filter(Boolean);
|
|
884
|
+
const duplicates = positions.filter((item, index) => positions.indexOf(item) !== index);
|
|
885
|
+
if (duplicates.length) {
|
|
886
|
+
console.warn('[gb-table] Duplicate mobile positions detected:', duplicates);
|
|
887
|
+
}
|
|
888
|
+
this.initializeColumns(newCols);
|
|
889
|
+
}
|
|
890
|
+
emitRowData(row) {
|
|
891
|
+
this.mobileRowClicked.emit(row);
|
|
892
|
+
}
|
|
893
|
+
generateNameInitials(name) {
|
|
894
|
+
const splitNames = name.split(' ');
|
|
895
|
+
return splitNames.map((nm) => nm.charAt(0));
|
|
896
|
+
}
|
|
897
|
+
renderCustomAction(row) {
|
|
898
|
+
if (!this.renderCustomActions)
|
|
899
|
+
return h("slot", { name: "row_actions" });
|
|
900
|
+
const rowId = String(this.getRowId(row));
|
|
901
|
+
return (h("div", { key: `custom-action-${rowId}`, class: "custom_action_slot", ref: el => {
|
|
902
|
+
if (!el)
|
|
903
|
+
return;
|
|
904
|
+
// Re-mount only when this container is bound to a different row.
|
|
905
|
+
// Prevents tearing down (and resetting) the host-framework component
|
|
906
|
+
// on unrelated re-renders (sort, resize, dropdown open, etc.).
|
|
907
|
+
if (el.dataset.rowKey === rowId)
|
|
908
|
+
return;
|
|
909
|
+
el.dataset.rowKey = rowId;
|
|
910
|
+
el.innerHTML = '';
|
|
911
|
+
this.renderCustomActions(el, row, (action) => this.handleAction(action, row));
|
|
912
|
+
} }));
|
|
913
|
+
}
|
|
914
|
+
renderDesktopView() {
|
|
915
|
+
this.internalColumns.forEach(col => {
|
|
916
|
+
});
|
|
917
|
+
// const tableStyle = this.columns.length > 5 ? { minWidth: `${totalWidth}px` } : {};
|
|
918
|
+
return (h("div", { class: `table_scroll`, ref: el => (this.scrollContainer = el) }, h("table", null, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { style: { width: '15px' }, class: {
|
|
919
|
+
checkbox: this.showCheckbox,
|
|
920
|
+
sticky_left: this.stickyFirstColumn,
|
|
921
|
+
[`table_header_${this.tableHeadColor}`]: true,
|
|
922
|
+
} }, h("gb-checkbox", { type: "checkbox", checked: this.allDataSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.internalColumns
|
|
923
|
+
.filter(col => col.visible)
|
|
924
|
+
.map((col, index) => {
|
|
925
|
+
var _a;
|
|
926
|
+
const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
|
|
927
|
+
return (h("th", { style: { width: col.width, cursor: col.sortable ? 'pointer' : 'default', textAlign: col.align || 'left' }, onClick: () => this.onSort(col), class: {
|
|
928
|
+
table_header: true,
|
|
929
|
+
[`table_header_${this.tableHeadColor}`]: true,
|
|
930
|
+
sticky_left: this.stickyFirstColumn && index === 0,
|
|
931
|
+
sortable: col.sortable,
|
|
932
|
+
has_border: this.isScrollable,
|
|
933
|
+
} }, h("div", { class: `table_head_content align-${align}` }, align === 'right' && h("div", { class: "table_head_icons" }, this.renderHeaderIcons(col)), h("p", { class: `head_text text-xs-medium` }, col.label), align === 'left' && h("div", { class: "table_head_icons" }, this.renderHeaderIcons(col)))));
|
|
934
|
+
}), this.showActionsColumn && (h("th", { class: {
|
|
935
|
+
actions_cell: true,
|
|
936
|
+
sticky_right: this.stickyLastColumn,
|
|
937
|
+
has_border: this.isScrollable,
|
|
938
|
+
[`table_header_${this.tableHeadColor}`]: true,
|
|
939
|
+
} }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body", onClick: () => this.showCheckbox && this.toggleRow(row) }, this.showCheckbox && (h("td", { class: `table_detail ${this.showCheckbox ? 'checkbox' : ''}` }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: (e) => {
|
|
940
|
+
e.stopPropagation();
|
|
941
|
+
this.toggleRow(row);
|
|
942
|
+
} }))), this.internalColumns
|
|
943
|
+
.filter(col => col.visible)
|
|
944
|
+
.map((col, index) => (h(Fragment, null, h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${col.truncate ? 'cell_truncate' : ''} ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, this.renderCell(col, row))))), this.showActionsColumn && (h("td", { class: { table_detail: true, actions_cell: true, sticky_right: this.stickyLastColumn, has_border: this.isScrollable }, style: { width: '50px' } }, h(Fragment, null, h("div", { class: "action_buttons" }, this.rowActions.map(action => (h(Fragment, null, action.type === 'dropdown' ? (h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "md", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: e => {
|
|
945
|
+
e.stopPropagation();
|
|
946
|
+
this.toggleDropdown(rowIndex);
|
|
947
|
+
} })) : action.type === 'custom' ? (this.renderCustomAction(row)) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: e => {
|
|
948
|
+
e.stopPropagation();
|
|
949
|
+
this.handleAction(action.action, row);
|
|
950
|
+
} })))))), h(Fragment, null, this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: this.dropdownPlacement, anchorEl: this.currentAnchorEl, boundaryEl: this.scrollContainer, dropdownHeight: requestAnimationFrame(() => this.dropdownRef.scrollHeight), open: true }, h("div", { class: "portal_dropdown_wrapper", ref: el => (this.dropdownRef = el) }, this.dropdownOptions.map(action => (h("gb-dropdown-items-with-shortcut", { icon: action.icon ? true : false, state: action.disabled ? StateEnum.Disabled : StateEnum.Default, label: action.label, "icon-src": action.icon, onClick: () => {
|
|
951
|
+
if (!action.disabled) {
|
|
952
|
+
this.handleAction(action.action, row, action.disabled ? true : false);
|
|
953
|
+
this.openRowIndex = null;
|
|
954
|
+
}
|
|
955
|
+
} })))))))))))))))));
|
|
956
|
+
}
|
|
957
|
+
renderGridView() {
|
|
958
|
+
return (h("div", { class: `table_grid_wrapper` }, this.displayedData.map((row, rowIndex) => {
|
|
959
|
+
var _a, _b, _c;
|
|
960
|
+
return (h("div", { class: "table_grid_card" }, h("div", { class: "grid_card_profile" }, h("div", { class: "grid_card_profile_content" }, h("div", { class: "profile_avatar" }, h("gb-avatar", { size: "lg", "show-border": "false" }, h("h1", { slot: "initials" }, this.generateNameInitials(row[this.gridCardConfig.name.key])))), h("div", { class: "profile_details" }, h("div", { class: "profile_name" }, h("p", { class: "text-lg-semi-bold" }, ((_a = this.gridCardConfig) === null || _a === void 0 ? void 0 : _a.name) ? row[this.gridCardConfig.name.key] : '')), (_c = (_b = this.gridCardConfig) === null || _b === void 0 ? void 0 : _b.badges) === null || _c === void 0 ? void 0 :
|
|
961
|
+
_c.map(badge => (h("gb-badge", { size: "lg", type: "badge_modern", color: "gray" }, h("p", null, row[badge.key]))))))), h("div", { class: "grid_card_buttons" }, h("div", { class: "btn" }, h("gb-button", { size: "md", hierarchy: "secondary_gray", icon: "default", "icon-leading": this.gridCardConfig.button.icon ? true : false, iconLeadingSwap: this.gridCardConfig.button.icon, onClick: () => this.handleAction(this.gridCardConfig.button.action, row) }, h("p", null, this.gridCardConfig.button.text))), h("gb-button", { size: "md", hierarchy: "secondary_gray", iconLeading: true, "icon-leading-swap": "assets/more-vertical.svg", icon: "only", onClick: () => this.openGridModal(rowIndex) })), this.openRowIndex === rowIndex && this.isGridModalVisible && (h("div", { class: `grid_dropdown_modal_overlay ${this.isGridModalVisible ? 'open' : 'closing'}` }, h("gb-button-close", { size: "sm", color: "gray", class: "grid_card_modal_close_button", onClick: () => this.closeGridModal() }), h("div", { class: "grid_dropdown_modal" }, this.dropdownOptions.map(action => (h("gb-dropdown-items-with-shortcut", { icon: action.icon ? true : false, state: action.disabled ? StateEnum.Disabled : StateEnum.Default, label: action.label, "icon-src": action.icon, onClick: () => {
|
|
962
|
+
this.handleAction(action.action, row);
|
|
963
|
+
this.openRowIndex = null;
|
|
964
|
+
} }))))))));
|
|
965
|
+
})));
|
|
966
|
+
}
|
|
967
|
+
renderMobileView() {
|
|
968
|
+
return (h("div", { class: "mobile_wrapper" }, this.displayedData.map(row => {
|
|
969
|
+
const topLeft = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'top_left'; });
|
|
970
|
+
const topRight = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'top_right'; });
|
|
971
|
+
const bottomLeft = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_left'; });
|
|
972
|
+
const bottomRight = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_right'; });
|
|
973
|
+
return (h("div", { class: "mobile_card_wrapper", style: { paddingLeft: this.showCheckbox ? 'var(--spacing-4)' : '' } }, this.showCheckbox && (h("gb-checkbox", { style: { paddingTop: 'var(--spacing-6)' }, type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), h("div", { class: "mobile-card", onClick: () => this.emitRowData(row) }, h("div", { class: "mobile-row left" }, h("div", { class: "mobile-cell" }, h("p", { class: "top_left_text text-md-regular" }, topLeft && row[topLeft.key])), h("div", { class: "mobile-cell" }, h("p", { class: "bottom_left_text text-sm-regular" }, bottomLeft && row[bottomLeft.key]))), h("div", { class: "mobile-row right" }, h("div", { class: "mobile-cell right" }, h("p", { class: "top_right_text text-md-semi-bold" }, topRight && row[topRight.key])), h("div", { class: "mobile-cell right" }, bottomRight && this.renderCell(bottomRight, row))))));
|
|
974
|
+
})));
|
|
975
|
+
}
|
|
976
|
+
emitSearchValue(detail) {
|
|
977
|
+
var _a, _b, _c;
|
|
978
|
+
this.searchTerm = (_c = (_b = (_a = detail.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : detail.detail) !== null && _c !== void 0 ? _c : '';
|
|
979
|
+
this.internalCurrentPage = 1; // reset pagination on search
|
|
980
|
+
if (this.tableHeaderConfig.searchMode === 'external') {
|
|
981
|
+
console.log('Emitting search value:', this.searchTerm);
|
|
982
|
+
this.inputValueChanged.emit(detail.detail);
|
|
983
|
+
}
|
|
984
|
+
}
|
|
985
|
+
emitDateChange(detail) {
|
|
986
|
+
this.dateChange.emit(detail.detail);
|
|
987
|
+
}
|
|
988
|
+
initializeColumns(cols) {
|
|
989
|
+
this.internalColumns = (cols || []).map(col => {
|
|
990
|
+
var _a;
|
|
991
|
+
return (Object.assign(Object.assign({}, col), { visible: (_a = col.visible) !== null && _a !== void 0 ? _a : true }));
|
|
992
|
+
});
|
|
993
|
+
}
|
|
994
|
+
reorderColumns(fromIndex, toIndex) {
|
|
995
|
+
const updated = [...this.internalColumns];
|
|
996
|
+
const [movedItem] = updated.splice(fromIndex, 1);
|
|
997
|
+
updated.splice(toIndex, 0, movedItem);
|
|
998
|
+
this.internalColumns = updated;
|
|
999
|
+
}
|
|
1000
|
+
columnOptionsButtonClicked() {
|
|
1001
|
+
return () => {
|
|
1002
|
+
this.showColumnsPanel = !this.showColumnsPanel;
|
|
1003
|
+
};
|
|
1004
|
+
}
|
|
1005
|
+
exportButtonClicked(detail) {
|
|
1006
|
+
this.exportClicked.emit(detail.detail);
|
|
1007
|
+
}
|
|
1008
|
+
onRefreshButtonClicked() {
|
|
1009
|
+
this.refreshButtonClicked.emit();
|
|
1010
|
+
}
|
|
1011
|
+
switchTableLayout(layout) {
|
|
1012
|
+
this.currentTableLayout = layout.detail;
|
|
1013
|
+
}
|
|
1014
|
+
emitTableContolClickedEvent(detail) {
|
|
1015
|
+
this.tableControlClicked.emit(detail.detail);
|
|
1016
|
+
}
|
|
1017
|
+
toggleColumn(event, columnKey) {
|
|
1018
|
+
const isVisible = event.detail;
|
|
1019
|
+
this.internalColumns = this.internalColumns.map(col => (col.key === columnKey ? Object.assign(Object.assign({}, col), { visible: isVisible }) : col));
|
|
1020
|
+
}
|
|
1021
|
+
openFilterModal() {
|
|
1022
|
+
this.showFilterModalInternal = true;
|
|
1023
|
+
requestAnimationFrame(() => {
|
|
1024
|
+
this.isFilterModalVisible = true;
|
|
1025
|
+
});
|
|
1026
|
+
}
|
|
1027
|
+
closeFilterModal() {
|
|
1028
|
+
this.isFilterModalVisible = false;
|
|
1029
|
+
setTimeout(() => {
|
|
1030
|
+
this.showFilterModalInternal = false;
|
|
1031
|
+
}, 300); // match CSS duration
|
|
1032
|
+
}
|
|
1033
|
+
onApplyFilters(e) {
|
|
1034
|
+
const { filters } = e.detail;
|
|
1035
|
+
this.appliedFilterValues = Object.assign(Object.assign({}, this.appliedFilterValues), filters);
|
|
1036
|
+
this.internalCurrentPage = 1; // ← reset pagination
|
|
1037
|
+
if (this.filterConfig.mode === 'external') {
|
|
1038
|
+
this.filterApplied.emit(this.appliedFilterValues);
|
|
1039
|
+
}
|
|
1040
|
+
this.showAndHideToast('Filter applied');
|
|
1041
|
+
this.closeFilterModal();
|
|
1042
|
+
}
|
|
1043
|
+
get mergedFilterConfig() {
|
|
1044
|
+
return Object.assign(Object.assign({}, this.filterConfig), { appliedValues: this.appliedFilterValues });
|
|
1045
|
+
}
|
|
1046
|
+
handleClearFilters() {
|
|
1047
|
+
this.appliedFilterValues = {};
|
|
1048
|
+
this.internalCurrentPage = 1;
|
|
1049
|
+
this.filterCleared.emit();
|
|
1050
|
+
this.showAndHideToast('Filter cleared');
|
|
1051
|
+
}
|
|
1052
|
+
get filteredData() {
|
|
1053
|
+
var _a;
|
|
1054
|
+
if (this.filterConfig.mode === 'external' || !((_a = this.filterConfig) === null || _a === void 0 ? void 0 : _a.fields) || Object.keys(this.appliedFilterValues).length === 0) {
|
|
1055
|
+
return this.sortedData;
|
|
1056
|
+
}
|
|
1057
|
+
return this.sortedData.filter(row => {
|
|
1058
|
+
return this.filterConfig.fields.every(field => {
|
|
1059
|
+
// Date picker — range match
|
|
1060
|
+
if (field.tag === 'gb-date-picker') {
|
|
1061
|
+
const keys = field.key;
|
|
1062
|
+
const startFilter = this.appliedFilterValues[keys.start];
|
|
1063
|
+
const endFilter = this.appliedFilterValues[keys.end];
|
|
1064
|
+
if (!startFilter && !endFilter)
|
|
1065
|
+
return true;
|
|
1066
|
+
const rowDate = new Date(row[field.columnKey]);
|
|
1067
|
+
if (isNaN(rowDate.getTime()))
|
|
1068
|
+
return true;
|
|
1069
|
+
// console.log('keys:', keys);
|
|
1070
|
+
// console.log('appliedFilterValues:', this.appliedFilterValues);
|
|
1071
|
+
// console.log('startFilter:', startFilter);
|
|
1072
|
+
// console.log('endFilter:', endFilter);
|
|
1073
|
+
// console.log('rowKey:', field.columnKey);
|
|
1074
|
+
// console.log('row value:', row[field.columnKey]);
|
|
1075
|
+
rowDate.setHours(0, 0, 0, 0);
|
|
1076
|
+
if (startFilter) {
|
|
1077
|
+
const start = new Date(startFilter);
|
|
1078
|
+
start.setHours(0, 0, 0, 0);
|
|
1079
|
+
if (rowDate < start)
|
|
1080
|
+
return false;
|
|
1081
|
+
}
|
|
1082
|
+
if (endFilter) {
|
|
1083
|
+
const end = new Date(endFilter);
|
|
1084
|
+
end.setHours(23, 59, 59, 999);
|
|
1085
|
+
if (rowDate > end)
|
|
1086
|
+
return false;
|
|
1087
|
+
}
|
|
1088
|
+
return true;
|
|
1089
|
+
}
|
|
1090
|
+
const key = field.key;
|
|
1091
|
+
const filterValue = this.appliedFilterValues[key];
|
|
1092
|
+
if (filterValue === undefined || filterValue === null || filterValue === '')
|
|
1093
|
+
return true;
|
|
1094
|
+
const rowValue = row[key];
|
|
1095
|
+
// Slider — range match using left/right
|
|
1096
|
+
if (field.tag === 'gb-slider') {
|
|
1097
|
+
const { left, right } = filterValue;
|
|
1098
|
+
if (left === undefined || right === undefined)
|
|
1099
|
+
return true;
|
|
1100
|
+
const num = Number(String(rowValue).replace(/[^0-9.-]+/g, ''));
|
|
1101
|
+
return num >= left && num <= right;
|
|
1102
|
+
}
|
|
1103
|
+
// Dropdown tags mode — array of selected values
|
|
1104
|
+
if (Array.isArray(filterValue)) {
|
|
1105
|
+
if (filterValue.length === 0)
|
|
1106
|
+
return true;
|
|
1107
|
+
return filterValue.some(val => String(rowValue).toLowerCase() === String(val).toLowerCase());
|
|
1108
|
+
}
|
|
1109
|
+
// Dropdown default mode — single value exact match
|
|
1110
|
+
return String(rowValue).toLowerCase() === String(filterValue).toLowerCase();
|
|
1111
|
+
});
|
|
1112
|
+
});
|
|
1113
|
+
}
|
|
1114
|
+
get searchedData() {
|
|
1115
|
+
if (!this.searchTerm || this.searchTerm.trim() === '') {
|
|
1116
|
+
return this.filteredData;
|
|
1117
|
+
}
|
|
1118
|
+
const term = this.searchTerm.toLowerCase().trim();
|
|
1119
|
+
const searchableCols = this.internalColumns.filter(col => col.searchable);
|
|
1120
|
+
if (searchableCols.length === 0)
|
|
1121
|
+
return this.filteredData;
|
|
1122
|
+
return this.filteredData.filter(row => searchableCols.some(col => {
|
|
1123
|
+
const value = col.value ? col.value(row) : row[col.key];
|
|
1124
|
+
return String(value !== null && value !== void 0 ? value : '')
|
|
1125
|
+
.toLowerCase()
|
|
1126
|
+
.includes(term);
|
|
1127
|
+
}));
|
|
1128
|
+
}
|
|
1129
|
+
showAndHideToast(message) {
|
|
1130
|
+
this.setFilterToastMessage(message);
|
|
1131
|
+
this.showToast = true;
|
|
1132
|
+
// Wait for the element to be in the DOM first
|
|
1133
|
+
setTimeout(() => {
|
|
1134
|
+
this.toastVisible = true;
|
|
1135
|
+
}, 50); // small delay to ensure element is mounted
|
|
1136
|
+
setTimeout(() => {
|
|
1137
|
+
this.toastVisible = false;
|
|
1138
|
+
setTimeout(() => {
|
|
1139
|
+
this.showToast = false;
|
|
1140
|
+
}, 300); // wait for slide-out before removing from DOM
|
|
1141
|
+
}, 3300);
|
|
1142
|
+
}
|
|
1143
|
+
setFilterToastMessage(message) {
|
|
1144
|
+
this.filterMessage = message;
|
|
1145
|
+
}
|
|
1146
|
+
hideToast() {
|
|
1147
|
+
this.toastVisible = false;
|
|
1148
|
+
this.showToast = false;
|
|
1149
|
+
}
|
|
1150
|
+
get noResultsMessage() {
|
|
1151
|
+
var _a;
|
|
1152
|
+
if ((_a = this.searchTerm) === null || _a === void 0 ? void 0 : _a.trim())
|
|
1153
|
+
return 'No results found';
|
|
1154
|
+
if (Object.keys(this.appliedFilterValues).length > 0)
|
|
1155
|
+
return 'No matching records';
|
|
1156
|
+
return this.emptyStateConfig.mainText;
|
|
1157
|
+
}
|
|
1158
|
+
get noResultsSupportingText() {
|
|
1159
|
+
var _a;
|
|
1160
|
+
if ((_a = this.searchTerm) === null || _a === void 0 ? void 0 : _a.trim())
|
|
1161
|
+
return `No records match "${this.searchTerm}". Try a different search.`;
|
|
1162
|
+
if (Object.keys(this.appliedFilterValues).length > 0)
|
|
1163
|
+
return 'Try adjusting or clearing your filters.';
|
|
1164
|
+
return this.emptyStateConfig.supportingText;
|
|
1165
|
+
}
|
|
1166
|
+
disconnectedCallback() {
|
|
1167
|
+
window.removeEventListener('resize', this.checkViewport);
|
|
1168
|
+
}
|
|
1169
|
+
render() {
|
|
1170
|
+
return (h("div", { key: '7a7d945137c7931afafaf113cc45a9319f892339', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: 'd894bcf70764a845479d3743c5edcf76845c7755', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '553cd6160919a3f0fae9e0e2aa2d658b679f81dc', type: this.tableHeaderConfig.type, mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, "pdf-sub-dropdown": this.tableHeaderConfig.pdfSubDropdown, "csv-sub-dropdown": this.tableHeaderConfig.csvSubDropdown, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e), onTableControlClicked: e => this.emitTableContolClickedEvent(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: '31c5fc8987f26c3605c7459a0a991eccc803e5d1', class: "dialog", style: {
|
|
1171
|
+
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
1172
|
+
} }, h("div", { key: '9ca28599f58c771a6bf7e08eb47ed4a422713759', class: "column-modal" }, h("div", { key: '34ccfe595dddc0c83c087745efc159b962b01b3e', class: "modal_header" }, h("div", { key: '48f8227eafeef3882788bc6781deb712ae7f051c', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '18108400f492ecf1d15fda27443a7f1a9a870427', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '4c737ca0fa8ad27f9f719046d991ad9006e1c657', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '0c2eed39994de713dd8b51116e69472503d69601', class: "content_wrapper" }, h("div", { key: 'a116a5141c64a7adcc01a0f84d7f936c61daa485', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
|
|
1173
|
+
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
1174
|
+
this.reorderColumns(this.draggedIndex, index);
|
|
1175
|
+
}
|
|
1176
|
+
this.draggedIndex = null;
|
|
1177
|
+
} }, h("div", { class: "label_and_dragger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M8 6H8.00635M8 12H8.00635M8 18H8.00635M15.9937 6H16M15.9937 12H16M15.9937 18H16", stroke: "var(--color-icon, #4B5565)", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { class: "label text-md-regular" }, col.label)), h("gb-toggle", { size: "sm", state: StateEnum.Default, position: "right", pressed: col.visible, text: false, onToggleClicked: e => {
|
|
1178
|
+
this.toggleColumn(e, col.key);
|
|
1179
|
+
} })))), h("div", { key: '16ebf2a250eaa9d622344451ce1ed6f741c2cbf3', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: 'b6c28aa9011a895e28b4378eff32521c915bc9dc', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'eebbb0e57b77ea6462e99c4b2865327cd25b3adf', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
|
|
1180
|
+
e.stopPropagation();
|
|
1181
|
+
this.closeFilterModal();
|
|
1182
|
+
}, onApplyFilters: e => this.onApplyFilters(e), onClearFilters: () => this.handleClearFilters() }))), this.internalLoading ? (
|
|
1183
|
+
// ✅ ALWAYS show loading when loading = true
|
|
1184
|
+
h("table", null, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { class: {
|
|
1185
|
+
checkbox: true,
|
|
1186
|
+
sticky_left: this.stickyFirstColumn,
|
|
1187
|
+
[`table_header_${this.tableHeadColor}`]: true,
|
|
1188
|
+
} }, h("gb-checkbox", { type: "checkbox", checked: this.allDataSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.internalColumns
|
|
1189
|
+
.filter(col => col.visible)
|
|
1190
|
+
.map((col, index) => {
|
|
1191
|
+
var _a;
|
|
1192
|
+
const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
|
|
1193
|
+
return (h("th", { style: {
|
|
1194
|
+
width: col.width,
|
|
1195
|
+
textAlign: col.align || 'left',
|
|
1196
|
+
}, class: {
|
|
1197
|
+
table_header: true,
|
|
1198
|
+
[`table_header_${this.tableHeadColor}`]: true,
|
|
1199
|
+
sticky_left: this.stickyFirstColumn && index === 0,
|
|
1200
|
+
has_border: this.isScrollable,
|
|
1201
|
+
} }, h("div", { class: `table_head_content align-${align}` }, h("p", { class: "head_text text-xs-medium" }, col.label))));
|
|
1202
|
+
}), this.showActionsColumn && (h("th", { class: {
|
|
1203
|
+
actions_cell: true,
|
|
1204
|
+
sticky_right: this.stickyLastColumn,
|
|
1205
|
+
has_border: this.isScrollable,
|
|
1206
|
+
[`table_header_${this.tableHeadColor}`]: true,
|
|
1207
|
+
} }, h("div", { class: "empty_div" }))))), h("tbody", null, Array.from({ length: 5 }).map(_ => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: "table_detail checkbox" }, h("gb-checkbox", { type: "checkbox", checked: this.allDataSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.internalColumns
|
|
1208
|
+
.filter(col => col.visible)
|
|
1209
|
+
.map((_col, index) => (h("td", { class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, h("div", { class: "loader" }, h("div", { class: "skeleton skeleton-text" }))))), this.showActionsColumn && (h("td", { class: {
|
|
1210
|
+
table_detail: true,
|
|
1211
|
+
actions_cell: true,
|
|
1212
|
+
sticky_right: this.stickyLastColumn,
|
|
1213
|
+
has_border: this.isScrollable,
|
|
1214
|
+
}, style: { width: '50px' } }, h("div", { class: "loader" }, h("div", { class: "skeleton skeleton-action" })))))))))) : this.data.length === 0 ? (
|
|
1215
|
+
// ✅ No loading + no data = empty state
|
|
1216
|
+
h("div", { class: "empty_state_wrapper" }, h("gb-empty-state", { size: "sm", "main-text": this.emptyStateConfig.mainText, "supporting-text": this.emptyStateConfig.supportingText, color: this.emptyStateConfig.color, theme: this.emptyStateConfig.theme, "primary-button-icon-leading-swap": "assets/plus.svg", "illustration-icon": this.emptyStateConfig.illustrationIcon, background: true, "background-type": "grid", icon: "illustration", "illustration-style": "cloud" }))) : this.searchedData.length === 0 ? (
|
|
1217
|
+
// Data exists but search/filter returned nothing
|
|
1218
|
+
h("div", { class: "empty_state_wrapper" }, h("gb-empty-state", { size: "sm", "main-text": this.noResultsMessage, "supporting-text": this.noResultsSupportingText, color: this.emptyStateConfig.color, theme: this.emptyStateConfig.theme, "illustration-icon": this.emptyStateConfig.illustrationIcon, background: true, "background-type": "grid", icon: "illustration", "illustration-style": "cloud" }))) : (
|
|
1219
|
+
// ✅ Has data + not loading
|
|
1220
|
+
h(Fragment, null, this.isMobile
|
|
1221
|
+
? this.renderMobileView()
|
|
1222
|
+
: this.currentTableLayout === 'list'
|
|
1223
|
+
? this.renderDesktopView()
|
|
1224
|
+
: this.currentTableLayout === 'grid'
|
|
1225
|
+
? this.renderGridView()
|
|
1226
|
+
: null)), this.paginationConfig && (h("div", { key: '2514588eedcb7fbc2a823e0a15f975af414ee7a9', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'fa371043084ebb51bd3e81f8a9079c8c43b85a33', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))), this.showToast && (h("gb-toast", { key: '7e9e75ae2726ecc6284801dbaaafb080667cb9c8', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
|
|
1227
|
+
}
|
|
1228
|
+
static get watchers() { return {
|
|
1229
|
+
"data": ["onDataChange"],
|
|
1230
|
+
"paginationConfig": ["handlePaginationConfigChange"],
|
|
1231
|
+
"loading": ["onLoadingChange"],
|
|
1232
|
+
"columns": ["validateMobilePositions"]
|
|
1233
|
+
}; }
|
|
1234
|
+
};
|
|
1235
|
+
GbTable.style = gbTableCss;
|
|
1236
|
+
|
|
1237
|
+
export { GbTable as gb_table };
|
|
1238
|
+
//# sourceMappingURL=gb-table.entry.js.map
|