pixel-react 1.2.6 → 1.2.8
Sign up to get free protection for your applications and to get access to all the features.
- package/.yarn/install-state.gz +0 -0
- package/lib/components/Drawer/Types.d.ts +29 -17
- package/lib/components/{ExcelFile → Excel}/ExcelFile/ExcelFile.d.ts +1 -0
- package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/actions.d.ts +39 -10
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducer.d.ts +4 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +40 -0
- package/lib/components/{ExcelFile → Excel}/ExcelToolBar/ExcelToolBar.d.ts +7 -3
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +4 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/Select/Select.stories.d.ts +1 -0
- package/lib/components/Toastify/Toastify.d.ts +5 -4
- package/lib/components/Toastify/types.d.ts +1 -0
- package/lib/index.d.ts +76 -24
- package/lib/index.esm.js +1467 -1038
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1468 -1038
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getSequentialPayload/getSequentialPayload.d.ts +2 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/getSequentialPayload/types.d.ts +30 -0
- package/package.json +3 -3
- package/src/assets/Themes/BaseTheme.scss +4 -0
- package/src/assets/icons/maximize_icon.svg +5 -0
- package/src/assets/styles/_fonts.scss +1 -1
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +15 -6
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +0 -5
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +20 -10
- package/src/components/Drawer/Drawer.scss +1 -0
- package/src/components/Drawer/Drawer.stories.tsx +8 -9
- package/src/components/Drawer/Drawer.tsx +8 -5
- package/src/components/Drawer/Types.ts +27 -14
- package/src/components/Excel/ExcelFile/ExcelFile.scss +62 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +312 -0
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ActiveCell.tsx +2 -2
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Cell.tsx +3 -3
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ColumnIndicator.tsx +4 -4
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/CornerIndicator.tsx +2 -2
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataEditor.tsx +1 -1
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataViewer.tsx +3 -3
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/FloatingRect.tsx +4 -4
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/RowIndicator.tsx +4 -4
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.scss +26 -24
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.tsx +13 -45
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Table.tsx +1 -1
- package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/actions.ts +88 -20
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +495 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +758 -0
- package/src/components/{ExcelFile → Excel}/ExcelFile.stories.tsx +45 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +36 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +346 -0
- package/src/components/Form/Form.scss +54 -35
- package/src/components/Form/Form.stories.tsx +264 -225
- package/src/components/Form/Forms.tsx +5 -1
- package/src/components/Icon/iconList.ts +2 -1
- package/src/components/Input/Input.tsx +0 -1
- package/src/components/MenuOption/MenuOption.scss +0 -1
- package/src/components/MenuOption/MenuOption.stories.tsx +3 -0
- package/src/components/MenuOption/MenuOption.tsx +5 -4
- package/src/components/MenuOption/types.ts +4 -0
- package/src/components/ModulesChip/ModuleChip.scss +2 -2
- package/src/components/ModulesChip/ModuleChip.tsx +4 -4
- package/src/components/MultiSelect/Dropdown.tsx +5 -2
- package/src/components/MultiSelect/MultiSelect.scss +16 -11
- package/src/components/MultiSelect/MultiSelect.stories.tsx +17 -13
- package/src/components/MultiSelect/MultiSelect.tsx +49 -26
- package/src/components/MultiSelect/MultiSelectTypes.ts +2 -1
- package/src/components/Select/Select.stories.tsx +161 -18
- package/src/components/Select/Select.tsx +41 -33
- package/src/components/Table/Table.scss +6 -5
- package/src/components/Table/Table.stories.tsx +0 -9
- package/src/components/Table/Table.tsx +2 -2
- package/src/components/TableTree/TableTree.scss +1 -1
- package/src/components/TableTree/TableTree.tsx +3 -1
- package/src/components/Toastify/Toastify.stories.tsx +29 -10
- package/src/components/Toastify/Toastify.tsx +42 -16
- package/src/components/Toastify/types.ts +2 -0
- package/src/components/Tooltip/Tooltip.scss +1 -1
- package/src/index.ts +4 -2
- package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +75 -0
- package/src/utils/getSequentialPayload/getSequentialPayload.ts +29 -0
- package/src/utils/getSequentialPayload/types.ts +35 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/src/components/ExcelFile/ExcelFile/Excel/reducer.ts +0 -952
- package/src/components/ExcelFile/ExcelFile/ExcelFile.scss +0 -24
- package/src/components/ExcelFile/ExcelFile/ExcelFile.tsx +0 -162
- package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.scss +0 -16
- package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx +0 -68
- package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss +0 -19
- package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx +0 -291
- package/src/fonts/Montserrat/Montserrat-Medium.ttf +0 -0
- package/src/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
- package/src/fonts/Montserrat/Montserrat-SemiBold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Black.ttf +0 -0
- package/src/fonts/Poppins/Poppins-BlackItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-BoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraBold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraBoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraLight.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraLightItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Italic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Light.ttf +0 -0
- package/src/fonts/Poppins/Poppins-LightItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-MediumItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-SemiBoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Thin.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ThinItalic.ttf +0 -0
- /package/lib/components/{ExcelFile → Excel}/ColorBarSelector/ColorBarSelector.d.ts +0 -0
- /package/lib/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ActiveCell.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Cell.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ColumnIndicator.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Copied.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/CornerIndicator.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataEditor.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataViewer.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/FloatingRect.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/HeaderRow.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Row.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/RowIndicator.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Selected.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Table.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/areModelsEqual.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/context.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/engine.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/formula.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/index.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-graph.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-hash.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-set.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/index.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/matrix.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point-range.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/selection.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/types.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-dispatch.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-selector.d.ts +0 -0
- /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/util.d.ts +0 -0
- /package/lib/components/{ExcelFile → Excel}/ExcelFile.stories.d.ts +0 -0
- /package/lib/components/{ExcelFile → Excel}/Types.d.ts +0 -0
- /package/lib/components/{ExcelFile → Excel}/index.d.ts +0 -0
- /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.scss +0 -0
- /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.tsx +0 -0
- /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.scss +0 -0
- /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Copied.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/HeaderRow.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Row.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Selected.tsx +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/areModelsEqual.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/context.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/engine.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/formula.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/index.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-graph.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-hash.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-set.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/index.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/matrix.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point-range.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/selection.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/types.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/typings/fast-formula-parser.d.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-dispatch.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-selector.ts +0 -0
- /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/util.ts +0 -0
- /package/src/components/{ExcelFile → Excel}/Types.ts +0 -0
- /package/src/components/{ExcelFile → Excel}/index.ts +0 -0
package/lib/index.esm.js
CHANGED
|
@@ -28,11 +28,11 @@ function styleInject(css, ref) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z$
|
|
32
|
-
styleInject(css_248z$
|
|
31
|
+
var css_248z$_ = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}\n\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-button, .ff-button--small, .ff-button--medium {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-button {\n width: auto;\n background-color: #ffffff;\n border-radius: 4px;\n padding: 4px 8px;\n text-align: center;\n text-decoration: none;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n gap: 4px;\n justify-content: center;\n align-items: center;\n border: 2px solid transparent;\n}\n.ff-button--transparent {\n background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n position: relative;\n cursor: pointer;\n border-radius: 4px;\n z-index: 1;\n border: none;\n overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n background: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);\n mask-composite: exclude;\n -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);\n -webkit-mask-composite: destination-out;\n z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n background: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n opacity: 50%;\n cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-button--primary {\n background: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n}\n.ff-button--primary:before {\n background: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n}\n.ff-button--primary:hover {\n background: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n}\n.ff-button--delete {\n background: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n color: #ffffff;\n}\n.ff-button--delete:before {\n background: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n}\n.ff-button--delete:hover {\n background: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n}\n.ff-button--warning {\n background: var(--warning-button-color);\n border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n background: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n}\n.ff-button--secondary:hover {\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n}\n.ff-button--tertiary {\n border: none;\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n}\n.ff-button--tertiary:hover {\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n}\n.ff-button--tertiary:disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-button--small {\n font-weight: 500;\n padding: 4.5px 8px;\n line-height: 15px;\n}\n.ff-button--medium {\n font-weight: 500;\n padding: 6px 12px;\n}\n.ff-button--large {\n padding: 8px 16px;\n}\n.ff-button-primary--text {\n color: #ffffff;\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n background: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}";
|
|
32
|
+
styleInject(css_248z$_);
|
|
33
33
|
|
|
34
|
-
var css_248z$
|
|
35
|
-
styleInject(css_248z$
|
|
34
|
+
var css_248z$Z = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}";
|
|
35
|
+
styleInject(css_248z$Z);
|
|
36
36
|
|
|
37
37
|
function getDefaultExportFromCjs (x) {
|
|
38
38
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -410,6 +410,8 @@ const SvgSafariIcon = (props) => /* @__PURE__ */ React.createElement("svg", { wi
|
|
|
410
410
|
|
|
411
411
|
const SvgMaximizeScript = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2947_11413)" }, /* @__PURE__ */ React.createElement("path", { d: "M5.5 4H18.5C19.3271 4 20 4.67285 20 5.5V11.6748C20 11.9512 19.7761 12.1748 19.5 12.1748C19.2239 12.1748 19 11.9512 19 11.6748V5.5C19 5.22412 18.7756 5 18.5 5H5.5C5.22437 5 5 5.22412 5 5.5V18.5C5 18.7759 5.22437 19 5.5 19H11.675C11.9512 19 12.175 19.2236 12.175 19.5C12.175 19.7764 11.9512 20 11.675 20H5.5C4.67285 20 4 19.3272 4 18.5V5.5C4 4.67285 4.67285 4 5.5 4Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M14.5 13H18.5C19.3271 13 20 13.6729 20 14.5V18.5C20 19.3271 19.3271 20 18.5 20H14.5C13.6729 20 13 19.3271 13 18.5V14.5C13 13.6729 13.6729 13 14.5 13Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M11.6465 12.3535L8.5 9.20703V10C8.5 10.2764 8.27612 10.5 8 10.5C7.72388 10.5 7.5 10.2764 7.5 10V8C7.5 7.73216 7.72802 7.5 8 7.5H10C10.2761 7.5 10.5 7.72363 10.5 8C10.5 8.27637 10.2761 8.5 10 8.5H9.20703L12.3535 11.6465C12.5488 11.8418 12.5488 12.1582 12.3535 12.3535C12.1647 12.5423 11.8414 12.5484 11.6465 12.3535Z", fill: "currentColor" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2947_11413" }, /* @__PURE__ */ React.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }))));
|
|
412
412
|
|
|
413
|
+
const SvgMaximizeIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.5 0H14.5C15.3271 0 16 0.67285 16 1.5V7.67481C16 7.95117 15.7761 8.1748 15.5 8.1748C15.2239 8.1748 15 7.95117 15 7.67481V1.5C15 1.22412 14.7756 1 14.5 1H1.5C1.22437 1 1 1.22412 1 1.5V14.5C1 14.7759 1.22437 15 1.5 15H7.67505C7.95117 15 8.17505 15.2236 8.17505 15.5C8.17505 15.7764 7.95117 16 7.67505 16H1.5C0.67285 16 0 15.3272 0 14.5V1.5C0 0.67285 0.67285 0 1.5 0Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M10.5 9H14.5C15.3271 9 16 9.67285 16 10.5V14.5C16 15.3271 15.3271 16 14.5 16H10.5C9.67285 16 9 15.3271 9 14.5V10.5C9 9.67285 9.67285 9 10.5 9Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M7.64649 8.35351L4.5 5.20703V6C4.5 6.27637 4.27612 6.5 4 6.5C3.72388 6.5 3.5 6.27637 3.5 6V4C3.5 3.73216 3.72802 3.5 4 3.5H6C6.27612 3.5 6.5 3.72363 6.5 4C6.5 4.27637 6.27612 4.5 6 4.5H5.20703L8.35352 7.64648C8.54883 7.84179 8.54883 8.1582 8.35352 8.35351C8.16474 8.54229 7.84137 8.54839 7.64649 8.35351Z", fill: "currentColor" }));
|
|
414
|
+
|
|
413
415
|
let Components = {};
|
|
414
416
|
Components['delete_info'] = SvgDeleteInfo;
|
|
415
417
|
Components['success'] = SvgSuccess;
|
|
@@ -550,9 +552,10 @@ Components['linux'] = SvgLinux;
|
|
|
550
552
|
Components['opera'] = SvgOpera;
|
|
551
553
|
Components['safari_icon'] = SvgSafariIcon;
|
|
552
554
|
Components['maximize_script'] = SvgMaximizeScript;
|
|
555
|
+
Components['maximize_icon'] = SvgMaximizeIcon;
|
|
553
556
|
|
|
554
|
-
var css_248z$
|
|
555
|
-
styleInject(css_248z$
|
|
557
|
+
var css_248z$Y = ".ff-icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-dark {\n background-color: var(--brand-color);\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n border-radius: 4px;\n background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n\n.ff-icon-click {\n cursor: pointer;\n box-sizing: content-box;\n}\n.ff-icon-click:hover {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n color: var(--toggle-strip-color);\n}";
|
|
558
|
+
styleInject(css_248z$Y);
|
|
556
559
|
|
|
557
560
|
const Icon = /*#__PURE__*/forwardRef(({
|
|
558
561
|
name,
|
|
@@ -639,8 +642,8 @@ const Button$1 = /*#__PURE__*/forwardRef(({
|
|
|
639
642
|
});
|
|
640
643
|
});
|
|
641
644
|
|
|
642
|
-
var css_248z$
|
|
643
|
-
styleInject(css_248z$
|
|
645
|
+
var css_248z$X = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 80px;\n min-width: 450px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n height: 24px;\n width: 24px;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}";
|
|
646
|
+
styleInject(css_248z$X);
|
|
644
647
|
|
|
645
648
|
function useEscapeKey(key) {
|
|
646
649
|
return callBack => {
|
|
@@ -659,8 +662,8 @@ function useEscapeKey(key) {
|
|
|
659
662
|
};
|
|
660
663
|
}
|
|
661
664
|
|
|
662
|
-
var css_248z$V = ":root {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n}\n\n:root {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}\n\n.ff-light-theme {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n}\n\n.ff-dark-theme {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}";
|
|
663
|
-
styleInject(css_248z$
|
|
665
|
+
var css_248z$W = ":root {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n}\n\n:root {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}\n\n.ff-light-theme {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n}\n\n.ff-dark-theme {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}";
|
|
666
|
+
styleInject(css_248z$W);
|
|
664
667
|
|
|
665
668
|
const ThemeContext = /*#__PURE__*/createContext$1(undefined);
|
|
666
669
|
const ThemeProvider = ({
|
|
@@ -708,10 +711,8 @@ const Drawer = ({
|
|
|
708
711
|
onCloseIconClick,
|
|
709
712
|
customHeader,
|
|
710
713
|
customFooter,
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
right: {}
|
|
714
|
-
},
|
|
714
|
+
leftTertiaryButtonProps = {},
|
|
715
|
+
rightTertiaryButtonProps = {},
|
|
715
716
|
zIndex = 999
|
|
716
717
|
}) => {
|
|
717
718
|
const [isExpanded, setIsExpanded] = useState(_isExpanded);
|
|
@@ -825,15 +826,17 @@ const Drawer = ({
|
|
|
825
826
|
onClick: leftPrimaryButtonProps.onClick,
|
|
826
827
|
variant: "primary",
|
|
827
828
|
transparentBackground: true
|
|
828
|
-
}),
|
|
829
|
-
...
|
|
829
|
+
}), leftTertiaryButtonProps?.label && jsx(Button$1, {
|
|
830
|
+
...leftTertiaryButtonProps,
|
|
831
|
+
onClick: leftTertiaryButtonProps.onClick,
|
|
830
832
|
variant: "tertiary",
|
|
831
833
|
transparentBackground: true
|
|
832
834
|
})]
|
|
833
835
|
}), jsxs("div", {
|
|
834
836
|
className: "button-container",
|
|
835
|
-
children: [
|
|
836
|
-
...
|
|
837
|
+
children: [rightTertiaryButtonProps?.label && jsx(Button$1, {
|
|
838
|
+
...rightTertiaryButtonProps,
|
|
839
|
+
onClick: rightTertiaryButtonProps.onClick,
|
|
837
840
|
variant: "tertiary",
|
|
838
841
|
transparentBackground: true
|
|
839
842
|
}), secondaryButtonProps.label && jsx(Button$1, {
|
|
@@ -854,15 +857,15 @@ const Drawer = ({
|
|
|
854
857
|
}), document.body);
|
|
855
858
|
};
|
|
856
859
|
|
|
857
|
-
var css_248z$
|
|
860
|
+
var css_248z$V = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-accordion {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n display: flex;\n justify-content: space-between;\n min-height: 32px;\n}\n.ff-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n display: flex;\n padding: 8px;\n align-items: center;\n transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n background-color: var(--hover-color);\n border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n padding: 4px;\n}";
|
|
861
|
+
styleInject(css_248z$V);
|
|
862
|
+
|
|
863
|
+
var css_248z$U = "";
|
|
858
864
|
styleInject(css_248z$U);
|
|
859
865
|
|
|
860
|
-
var css_248z$T = "";
|
|
866
|
+
var css_248z$T = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tooltip-container {\n cursor: pointer;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 6px 12px;\n opacity: 0;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
|
|
861
867
|
styleInject(css_248z$T);
|
|
862
868
|
|
|
863
|
-
var css_248z$S = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-tooltip-container {\n cursor: auto;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 6px 12px;\n opacity: 0;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
|
|
864
|
-
styleInject(css_248z$S);
|
|
865
|
-
|
|
866
869
|
const checkEmpty = value => {
|
|
867
870
|
// Check for null or undefined
|
|
868
871
|
if (value == null) return true;
|
|
@@ -1034,8 +1037,8 @@ const Tooltip = ({
|
|
|
1034
1037
|
});
|
|
1035
1038
|
};
|
|
1036
1039
|
|
|
1037
|
-
var css_248z$
|
|
1038
|
-
styleInject(css_248z$
|
|
1040
|
+
var css_248z$S = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.ff-text {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n.ff-text--regular {\n font-weight: 400;\n}\n.ff-text--medium {\n font-weight: 500;\n}\n.ff-text--semi-bold {\n font-weight: 600;\n}\n.ff-text--bold {\n font-weight: 700;\n}\n.ff-text .required-asterisk {\n color: var(--input-error-text-color);\n padding-right: 4px;\n}";
|
|
1041
|
+
styleInject(css_248z$S);
|
|
1039
1042
|
|
|
1040
1043
|
const Typography = ({
|
|
1041
1044
|
fontWeight = 'regular',
|
|
@@ -1124,8 +1127,8 @@ const Accordion = ({
|
|
|
1124
1127
|
});
|
|
1125
1128
|
};
|
|
1126
1129
|
|
|
1127
|
-
var css_248z$
|
|
1128
|
-
styleInject(css_248z$
|
|
1130
|
+
var css_248z$R = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-wrapper .ff-multiselect__main .default-label, .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-wrapper .error-text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multiselect-wrapper {\n box-sizing: border-box;\n transition: all 0.3s ease;\n cursor: pointer;\n position: relative;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n background: var(--drawer-footer-bg);\n min-width: 150px;\n width: 100%;\n height: 32px;\n}\n.ff-multiselect-wrapper .ff-multiselect {\n position: relative;\n padding: 3px;\n border: none;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-multiselect-wrapper .ff-multiselect__main {\n display: flex;\n flex: 1;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .default-label {\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n color: var(--default-icon-color);\n line-height: 18px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-required-asterisk {\n color: var(--error-light);\n}\n.ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n font-size: 8px !important;\n height: 8px;\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n background-color: var(--multi-select-label-bg);\n line-height: 12px;\n color: var(--default-icon-color);\n padding: 0 4px;\n position: absolute;\n left: 8px;\n top: -6px;\n pointer-events: none;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 5px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n border: 0.5px solid #f1ebf2;\n padding: 0 1px 0 4px;\n gap: 4px;\n border-radius: 15px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n line-height: 14px;\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n padding: 5px 2px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n color: var(--brand-color);\n cursor: pointer;\n padding-right: 0px;\n padding-left: 0px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n flex: 1;\n min-width: 20px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n width: 100%;\n min-width: 30px;\n max-width: calc(100% - 0px);\n padding: 2px;\n box-sizing: border-box;\n border: none;\n font-size: 12px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n outline: none;\n}\n.ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n display: flex;\n align-items: center;\n width: 1rem;\n font-weight: 600;\n line-height: 16px;\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n transition: transform 0.3s ease;\n transform: rotate(360deg);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n}\n.ff-multiselect-wrapper:hover {\n border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n fill: var(--tooltip-bg-color);\n transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--with-options {\n height: fit-content;\n}\n.ff-multiselect-wrapper--opened-dropdown {\n border: 1px solid var(--brand-color);\n height: fit-content;\n cursor: default;\n}\n.ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover {\n border: 1px solid var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper--error {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-wrapper--disabled {\n pointer-events: none;\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover {\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n color: var(--text-color-light);\n}\n.ff-multiselect-wrapper .error-text {\n position: absolute;\n margin-top: 0.25rem;\n left: 12px;\n color: var(--error-light);\n letter-spacing: 0.5px;\n}";
|
|
1131
|
+
styleInject(css_248z$R);
|
|
1129
1132
|
|
|
1130
1133
|
const dropdownDefaultCSSData$1 = {
|
|
1131
1134
|
verticalMargin: 4,
|
|
@@ -1133,9 +1136,59 @@ const dropdownDefaultCSSData$1 = {
|
|
|
1133
1136
|
maxDropdownHeight: 160
|
|
1134
1137
|
};
|
|
1135
1138
|
|
|
1136
|
-
var css_248z$
|
|
1139
|
+
var css_248z$Q = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n position: absolute;\n background: var(--drawer-footer-bg);\n z-index: 1000;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n border: 0.5px solid var(--ff-select-option-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n margin-block: 4px;\n max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n max-height: 128px;\n overflow-y: auto;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 40px;\n border-radius: 12px 0px 0px 0px;\n background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n background: var(--ff-select-scroll-thumb-color);\n border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n color: var(--pop-up-background-blur);\n text-align: center;\n margin: 0;\n padding: 10px;\n line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n height: 32px;\n padding: 4px 8px;\n gap: 4px;\n border-radius: 4px 0px 0px 0px;\n background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n box-sizing: border-box;\n width: 100%;\n border-top: 1px solid var(--slider-table-color);\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
1140
|
+
styleInject(css_248z$Q);
|
|
1141
|
+
|
|
1142
|
+
var css_248z$P = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 8px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n background: var(--brand-color);\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n background-color: var(--brand-color);\n border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n opacity: 1;\n}";
|
|
1137
1143
|
styleInject(css_248z$P);
|
|
1138
1144
|
|
|
1145
|
+
const Checkbox = ({
|
|
1146
|
+
id,
|
|
1147
|
+
name,
|
|
1148
|
+
label,
|
|
1149
|
+
disabled = false,
|
|
1150
|
+
checked: initialChecked = false,
|
|
1151
|
+
partial = false,
|
|
1152
|
+
onChange
|
|
1153
|
+
}) => {
|
|
1154
|
+
const [checked, setChecked] = useState(initialChecked);
|
|
1155
|
+
useEffect(() => {
|
|
1156
|
+
setChecked(initialChecked);
|
|
1157
|
+
}, [initialChecked]);
|
|
1158
|
+
const handleCheckboxChange = event => {
|
|
1159
|
+
if (!disabled) {
|
|
1160
|
+
setChecked(prev => !prev), onChange?.(event);
|
|
1161
|
+
}
|
|
1162
|
+
};
|
|
1163
|
+
return jsxs("label", {
|
|
1164
|
+
className: "ff-checkbox--overlay",
|
|
1165
|
+
htmlFor: id,
|
|
1166
|
+
children: [jsx("input", {
|
|
1167
|
+
type: "checkbox",
|
|
1168
|
+
className: "ff-checkbox-input",
|
|
1169
|
+
id: id,
|
|
1170
|
+
name: name,
|
|
1171
|
+
checked: checked,
|
|
1172
|
+
onChange: handleCheckboxChange,
|
|
1173
|
+
disabled: disabled
|
|
1174
|
+
}), jsx("span", {
|
|
1175
|
+
className: classNames('ff-checkbox-custom', {
|
|
1176
|
+
'ff-checkbox-checked': checked,
|
|
1177
|
+
'ff-storybook-checkbox--partial': partial && !checked
|
|
1178
|
+
}),
|
|
1179
|
+
children: checked && jsx(Icon, {
|
|
1180
|
+
name: "tick",
|
|
1181
|
+
height: 6,
|
|
1182
|
+
width: 8,
|
|
1183
|
+
color: "var(--primary-icon-color)"
|
|
1184
|
+
})
|
|
1185
|
+
}), jsx(Typography, {
|
|
1186
|
+
as: "span",
|
|
1187
|
+
children: label
|
|
1188
|
+
})]
|
|
1189
|
+
});
|
|
1190
|
+
};
|
|
1191
|
+
|
|
1139
1192
|
const Dropdown$2 = /*#__PURE__*/forwardRef(({
|
|
1140
1193
|
options,
|
|
1141
1194
|
handleOptionChange,
|
|
@@ -1188,11 +1241,10 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
|
|
|
1188
1241
|
}) : filteredOptions.map(info => jsxs("div", {
|
|
1189
1242
|
role: "option",
|
|
1190
1243
|
className: `dropdown-option-container`,
|
|
1191
|
-
onClick: () => handleOptionChange(info, !info.isChecked),
|
|
1192
|
-
children: [jsx(
|
|
1193
|
-
type: "checkbox",
|
|
1244
|
+
onClick: () => !info?.isDisabled && handleOptionChange(info, !info.isChecked),
|
|
1245
|
+
children: [jsx(Checkbox, {
|
|
1194
1246
|
checked: info.isChecked,
|
|
1195
|
-
|
|
1247
|
+
disabled: info?.isDisabled
|
|
1196
1248
|
}), jsx(Typography, {
|
|
1197
1249
|
as: "span",
|
|
1198
1250
|
className: "dropdown-option-label",
|
|
@@ -1212,21 +1264,24 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
|
|
|
1212
1264
|
|
|
1213
1265
|
const ChipElement = ({
|
|
1214
1266
|
label,
|
|
1215
|
-
onChipCloseClick
|
|
1267
|
+
onChipCloseClick,
|
|
1268
|
+
disableChip
|
|
1216
1269
|
}) => {
|
|
1217
1270
|
if (label) {
|
|
1218
1271
|
return jsxs("div", {
|
|
1219
1272
|
className: "ff-multiselect-chip",
|
|
1220
|
-
children: [
|
|
1221
|
-
className:
|
|
1222
|
-
children:
|
|
1223
|
-
|
|
1224
|
-
|
|
1273
|
+
children: [jsx("span", {
|
|
1274
|
+
className: `ff-multiselect-chip-label ${disableChip && 'label-padding'}`,
|
|
1275
|
+
children: jsx(Tooltip, {
|
|
1276
|
+
placement: "bottom",
|
|
1277
|
+
title: label?.length > 25 ? label : '',
|
|
1278
|
+
zIndex: 101,
|
|
1279
|
+
children: label?.length > 25 ? label?.slice(0, 25) + '...' : label
|
|
1280
|
+
})
|
|
1281
|
+
}), !disableChip && jsx(Icon, {
|
|
1225
1282
|
className: "ff-multiselect-chip-close-icon",
|
|
1226
1283
|
onClick: onChipCloseClick,
|
|
1227
|
-
name: "close_pill"
|
|
1228
|
-
height: 13,
|
|
1229
|
-
width: 13
|
|
1284
|
+
name: "close_pill"
|
|
1230
1285
|
})]
|
|
1231
1286
|
});
|
|
1232
1287
|
}
|
|
@@ -1246,13 +1301,11 @@ const MultiSelect = ({
|
|
|
1246
1301
|
errorMessage = 'Fill this field',
|
|
1247
1302
|
withSelectButton = false,
|
|
1248
1303
|
onSelect = () => {},
|
|
1249
|
-
displayCount = false
|
|
1304
|
+
displayCount = false,
|
|
1305
|
+
placeholderForSearching = 'Search'
|
|
1250
1306
|
}) => {
|
|
1251
1307
|
const [isOpen, setIsOpen] = useState(false);
|
|
1252
1308
|
const [allOptions, setAllOptions] = useState(options);
|
|
1253
|
-
useEffect(() => {
|
|
1254
|
-
setAllOptions(options);
|
|
1255
|
-
}, [options]);
|
|
1256
1309
|
const [searchedKeyword, setSearchedKeyword] = useState('');
|
|
1257
1310
|
const [isSelectFocusedOnce, setIsSelectFocusedOnce] = useState(false);
|
|
1258
1311
|
const [inputError, setInputError] = useState('');
|
|
@@ -1355,8 +1408,17 @@ const MultiSelect = ({
|
|
|
1355
1408
|
calculatePosition();
|
|
1356
1409
|
}
|
|
1357
1410
|
}, [isOpen, allOptions]);
|
|
1411
|
+
function getScrollbarWidth() {
|
|
1412
|
+
const div = document.createElement('div');
|
|
1413
|
+
div.style.visibility = 'hidden';
|
|
1414
|
+
div.style.overflow = 'scroll';
|
|
1415
|
+
document.body.appendChild(div);
|
|
1416
|
+
const scrollbarWidth = div.offsetWidth - div.clientWidth;
|
|
1417
|
+
document.body.removeChild(div);
|
|
1418
|
+
return scrollbarWidth;
|
|
1419
|
+
}
|
|
1358
1420
|
const onSelectToggleScroll = isEnabled => {
|
|
1359
|
-
const bodyScrollWidth =
|
|
1421
|
+
const bodyScrollWidth = getScrollbarWidth();
|
|
1360
1422
|
document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
|
|
1361
1423
|
document.body.style.overflow = isEnabled ? '' : 'hidden';
|
|
1362
1424
|
};
|
|
@@ -1379,6 +1441,8 @@ const MultiSelect = ({
|
|
|
1379
1441
|
}));
|
|
1380
1442
|
setAllOptions(initializeOptions);
|
|
1381
1443
|
}
|
|
1444
|
+
}, [options]);
|
|
1445
|
+
useEffect(() => {
|
|
1382
1446
|
const handleClickAnywhere = event => {
|
|
1383
1447
|
if (dropdownWrapper.current && inputRef.current && selectWrapper.current && dropdownRef.current && !inputRef.current.contains(event?.target) && !dropdownRef.current.contains(event?.target) && !selectWrapper.current.contains(event?.target)) {
|
|
1384
1448
|
setInputError('');
|
|
@@ -1409,30 +1473,35 @@ const MultiSelect = ({
|
|
|
1409
1473
|
onClick: handleClick,
|
|
1410
1474
|
children: [jsxs("div", {
|
|
1411
1475
|
className: "ff-multiselect__main",
|
|
1412
|
-
children: [
|
|
1476
|
+
children: [jsxs(Typography, {
|
|
1413
1477
|
as: "span",
|
|
1414
1478
|
className: classNames({
|
|
1415
1479
|
'active-default-label': isOpen || selectedOptions?.length || isFieldSkipped && required,
|
|
1416
1480
|
'default-label': !isOpen && !selectedOptions?.length
|
|
1417
1481
|
}),
|
|
1418
|
-
children:
|
|
1482
|
+
children: [required && jsx("span", {
|
|
1483
|
+
className: "ff-required-asterisk",
|
|
1484
|
+
children: "*"
|
|
1485
|
+
}), label]
|
|
1419
1486
|
}), jsxs("div", {
|
|
1420
1487
|
className: "ff-multiselect-chip-container",
|
|
1421
1488
|
children: [displayCount ? jsx(Fragment, {
|
|
1422
1489
|
children: selectedOptions.slice(0, maxVisibleChips).map(option => jsx(ChipElement, {
|
|
1423
1490
|
label: option?.label || '',
|
|
1424
|
-
onChipCloseClick: e => handleChipCloseClick(option, e)
|
|
1491
|
+
onChipCloseClick: e => handleChipCloseClick(option, e),
|
|
1492
|
+
disableChip: option?.isDisabled || false
|
|
1425
1493
|
}, option?.label))
|
|
1426
1494
|
}) : selectedOptions.map(option => jsx(ChipElement, {
|
|
1427
1495
|
label: option?.label || '',
|
|
1428
|
-
onChipCloseClick: e => handleChipCloseClick(option, e)
|
|
1496
|
+
onChipCloseClick: e => handleChipCloseClick(option, e),
|
|
1497
|
+
disableChip: option?.isDisabled || false
|
|
1429
1498
|
}, option?.label)), jsx("div", {
|
|
1430
1499
|
className: "ff-multiselect-input-container",
|
|
1431
1500
|
children: jsx("input", {
|
|
1432
1501
|
value: searchedKeyword,
|
|
1433
1502
|
type: type,
|
|
1434
1503
|
autoComplete: "off",
|
|
1435
|
-
placeholder:
|
|
1504
|
+
placeholder: placeholderForSearching,
|
|
1436
1505
|
ref: inputRef,
|
|
1437
1506
|
onChange: handleSearch,
|
|
1438
1507
|
onKeyDown: handleKeyEnter,
|
|
@@ -1442,12 +1511,12 @@ const MultiSelect = ({
|
|
|
1442
1511
|
display: isOpen || selectedOptions.length ? 'inherit' : 'none'
|
|
1443
1512
|
}
|
|
1444
1513
|
})
|
|
1445
|
-
}), hiddenCount > 0 && jsxs("div", {
|
|
1446
|
-
className: "ff-multiselect-more-chip",
|
|
1447
|
-
onClick: toggleDropdown,
|
|
1448
|
-
children: ["+", hiddenCount]
|
|
1449
1514
|
})]
|
|
1450
1515
|
})]
|
|
1516
|
+
}), hiddenCount > 0 && displayCount && jsxs("div", {
|
|
1517
|
+
className: "ff-multiselect-more-chip",
|
|
1518
|
+
onClick: toggleDropdown,
|
|
1519
|
+
children: ["+", hiddenCount]
|
|
1451
1520
|
}), jsx("div", {
|
|
1452
1521
|
onClick: toggleDropdown,
|
|
1453
1522
|
className: "ff-multiselect__toggle",
|
|
@@ -1480,7 +1549,7 @@ const MultiSelect = ({
|
|
|
1480
1549
|
});
|
|
1481
1550
|
};
|
|
1482
1551
|
|
|
1483
|
-
var css_248z$O = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
1552
|
+
var css_248z$O = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-toaster-overlay {\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n justify-content: flex-end;\n align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n background-color: var(--drawer-footer-bg);\n display: flex;\n border-radius: 10px;\n margin: 16px;\n pointer-events: auto;\n min-width: 320px;\n max-width: 600px;\n gap: 8px;\n box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n padding: 8px;\n display: flex;\n border-radius: 10px;\n gap: 8px;\n width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 8px;\n padding: 1px;\n -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n margin-top: 4px;\n display: flex;\n gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n box-sizing: border-box;\n cursor: pointer;\n height: fit-content;\n width: fit-content;\n border-radius: 8px;\n padding: 8px;\n background: var(--toast-close-icon-wrapper-bg);\n margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n from {\n transform: translateX(0%);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideInToasterBottomRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0%);\n }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n display: flex;\n gap: 5px;\n margin: 15px;\n}";
|
|
1484
1553
|
styleInject(css_248z$O);
|
|
1485
1554
|
|
|
1486
1555
|
const Toaster = ({
|
|
@@ -1711,7 +1780,7 @@ const Toggle = ({
|
|
|
1711
1780
|
});
|
|
1712
1781
|
};
|
|
1713
1782
|
|
|
1714
|
-
var css_248z$L = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-chip-wrapper .ff-default-chip-style {\n font-family: \"Poppins\"
|
|
1783
|
+
var css_248z$L = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-chip-wrapper .ff-default-chip-style {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-chip-wrapper {\n display: inline-flex;\n margin: 5px;\n justify-content: center;\n align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: fit-content;\n gap: 5px;\n height: 17px;\n border-radius: 25px;\n padding: 1px 6px;\n line-height: 15px;\n border: none;\n transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n background-color: var(--ff-chips-fill-color);\n color: var(--ff-chip-bg);\n color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n background-color: var(--ff-success);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n background-color: var(--ff-error-light);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n background-color: var(--ff-warning);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n background: rgba(97, 11, 134, 0.1019607843);\n color: #610b86;\n padding: 2px 8px;\n border-radius: 12px;\n cursor: pointer;\n white-space: nowrap;\n box-shadow: none;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n background-color: #610b86;\n color: #fdfaff;\n}";
|
|
1715
1784
|
styleInject(css_248z$L);
|
|
1716
1785
|
|
|
1717
1786
|
const Chip = ({
|
|
@@ -1741,7 +1810,7 @@ const Chip = ({
|
|
|
1741
1810
|
});
|
|
1742
1811
|
};
|
|
1743
1812
|
|
|
1744
|
-
var css_248z$K = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
1813
|
+
var css_248z$K = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder, .ff-input-container .ff-input-message, .ff-input-container--float .ff-input-label-container {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n padding: 6px 8px;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n}\n.ff-input-container .ff-input--medium {\n padding: 10px 9px;\n}\n.ff-input-container .ff-input:disabled, .ff-input-container .ff-input-label-container:disabled {\n cursor: not-allowed;\n}\n.ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-input-container .ff-input--disabled {\n background: transparent;\n border-color: var(--input-default-border-color);\n}\n.ff-input-container .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input--transparentBackground {\n background: transparent;\n}\n.ff-input-container .ff-input--no-border {\n border: none;\n}\n.ff-input-container .ff-input-label-container {\n display: flex;\n gap: 2px;\n position: absolute;\n border: none;\n outline: none;\n line-height: 18px;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-container .ff-input-label-container--medium {\n line-height: 25px;\n}\n.ff-input-container .ff-input-label-container .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--disabled {\n color: var(--input-default-border-color);\n background-color: var(--input-label-bg-color);\n}\n.ff-input-container .ff-input-label-container .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-container:hover .ff-input-label--no-hover {\n color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input, .ff-input-container:hover .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-container:hover .ff-input--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--disabled {\n background: transparent;\n border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input-label-container {\n top: -6px;\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-container:focus-within .ff-input-label--primary {\n color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input--primary {\n border-color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-input-container .ff-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-input-container .ff-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container--float .ff-input-label-container {\n top: -6px;\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-container--float--disabled {\n cursor: not-allowed;\n}\n.ff-input-container--float--disabled .ff-input-label-container {\n cursor: not-allowed;\n}";
|
|
1745
1814
|
styleInject(css_248z$K);
|
|
1746
1815
|
|
|
1747
1816
|
const Input = ({
|
|
@@ -1806,7 +1875,6 @@ const Input = ({
|
|
|
1806
1875
|
onChange: onChange,
|
|
1807
1876
|
onFocus: onFocus,
|
|
1808
1877
|
onBlur: onBlur,
|
|
1809
|
-
required: required,
|
|
1810
1878
|
autoComplete: autoComplete,
|
|
1811
1879
|
min: minValue,
|
|
1812
1880
|
max: maxValue,
|
|
@@ -1820,7 +1888,7 @@ const Input = ({
|
|
|
1820
1888
|
});
|
|
1821
1889
|
};
|
|
1822
1890
|
|
|
1823
|
-
var css_248z$J = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
1891
|
+
var css_248z$J = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radial-chart-container {\n cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}";
|
|
1824
1892
|
styleInject(css_248z$J);
|
|
1825
1893
|
|
|
1826
1894
|
const useColorMappings$1 = () => useMemo(() => {
|
|
@@ -1963,7 +2031,7 @@ const RadialChart = ({
|
|
|
1963
2031
|
});
|
|
1964
2032
|
};
|
|
1965
2033
|
|
|
1966
|
-
var css_248z$I = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
2034
|
+
var css_248z$I = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n display: inline-flex;\n gap: 16px;\n align-items: center;\n border-radius: 16px;\n cursor: pointer;\n overflow: hidden;\n width: auto;\n padding: 4px 8px;\n transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n border: 0.5px solid var(--brand-color);\n background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 4px;\n white-space: nowrap;\n padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n height: 14px;\n width: 14px;\n display: grid;\n place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n display: flex;\n gap: 8px;\n max-width: 500px;\n overflow-x: auto;\n -ms-overflow-style: none;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n transform: scaleX(1);\n opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n padding: 2px 8px;\n border-radius: 12px;\n white-space: nowrap;\n transition: background-color 0.3s ease, color 0.3s ease;\n opacity: 0;\n transform: translateX(-10px);\n animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n background: var(--expandable-menu-option-bg);\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n background-color: var(--brand-color);\n color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n line-height: 18px;\n}\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n transform: translateX(-10px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n animation: fadeIn 0.5s ease forwards;\n}";
|
|
1967
2035
|
styleInject(css_248z$I);
|
|
1968
2036
|
|
|
1969
2037
|
const ExpandableMenu = ({
|
|
@@ -2053,7 +2121,7 @@ const useClickOutside = (ref, callback, ignoreRefs = []) => {
|
|
|
2053
2121
|
}, [ref, callback, ignoreRefs]);
|
|
2054
2122
|
};
|
|
2055
2123
|
|
|
2056
|
-
var css_248z$H = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
2124
|
+
var css_248z$H = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-select-dropdown-wrapper .ff-select-options-wrapper {\n max-height: 160px;\n z-index: 100;\n position: absolute;\n min-width: 100px;\n border: 1px solid var(--ff-select-option-border-color);\n box-sizing: border-box;\n margin-top: 4px;\n border-radius: 4px;\n background-color: var(--ff-select-background-color);\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-track {\n background-color: transparent;\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option {\n width: calc(100% - 18px);\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option:hover {\n border-color: var(--ff-select-background-color);\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-no-option {\n width: calc(100% - 16px);\n margin: 0;\n overflow: hidden;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}";
|
|
2057
2125
|
styleInject(css_248z$H);
|
|
2058
2126
|
|
|
2059
2127
|
const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
|
|
@@ -2150,7 +2218,7 @@ const Dropdown$1 = ({
|
|
|
2150
2218
|
});
|
|
2151
2219
|
};
|
|
2152
2220
|
|
|
2153
|
-
var css_248z$G = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
2221
|
+
var css_248z$G = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select, .ff-select-wrapper .ff-select-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select-fieldset .ff-select-legend, .ff-select-wrapper .ff-select-label--active {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-select-wrapper {\n position: relative;\n}\n.ff-select-wrapper .ff-select-input {\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 100px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-select-wrapper .ff-select-fieldset {\n margin: 0;\n padding: 25px 0px 0px 8px;\n border: 1px solid transparent;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n display: block;\n}\n.ff-select-wrapper .ff-select-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-select-wrapper .ff-select-fieldset--default {\n opacity: 0;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-fieldset--active {\n opacity: 1;\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset--option {\n opacity: 1;\n}\n.ff-select-wrapper .ff-select-fieldset--no-border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--active {\n transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n opacity: 1;\n color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--option {\n opacity: 1;\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--error {\n color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--required {\n margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-input {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: 100%;\n min-height: calc(100% - 8px);\n padding: 0 28px 0 8px;\n border-radius: 4px;\n border: 1px solid transparent;\n z-index: 100;\n background: transparent;\n outline: none;\n}\n.ff-select-wrapper .ff-select-input:hover ~ .ff-select-label {\n color: var(--ff-select-text-hover-color);\n}\n.ff-select-wrapper .ff-select-input--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-input--default {\n opacity: 1;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover {\n border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option {\n border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option .ff-select-legend--option {\n color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-select-wrapper .ff-select-input--active {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--active:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover ~ .ff-select-fieldset--no-border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--disable {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover ~ .ff-select-label--default {\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-input--error {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-input--error:hover {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-label {\n position: absolute;\n top: 13px;\n right: auto;\n bottom: auto;\n left: 8px;\n z-index: 1;\n font-size: 12px;\n top: 60%;\n padding-left: 8px;\n}\n.ff-select-wrapper .ff-select-label--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 1;\n color: var(--ff-select-default-color);\n transform: translateY(-50%);\n}\n.ff-select-wrapper .ff-select-label--active {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n transform: translateY(-150%);\n padding: 0 6px;\n}\n.ff-select-wrapper .ff-select-label--required {\n margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-arrow {\n position: absolute;\n top: 60%;\n height: 100%;\n right: 10px;\n transform: rotateX(180deg) translateY(50%);\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select-arrow--no-label {\n top: 50%;\n}\n.ff-select-wrapper .ff-select-arrow--down {\n transform: rotateX(0deg) translateY(-50%);\n z-index: 101;\n}\n.ff-select-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}";
|
|
2154
2222
|
styleInject(css_248z$G);
|
|
2155
2223
|
|
|
2156
2224
|
const portalPosition = {
|
|
@@ -2423,6 +2491,11 @@ const Select$1 = ({
|
|
|
2423
2491
|
handleSelectAction('SHOW_ERROR');
|
|
2424
2492
|
}
|
|
2425
2493
|
}, []);
|
|
2494
|
+
useEffect(() => {
|
|
2495
|
+
if (!checkEmpty(selectedOption.label)) {
|
|
2496
|
+
onSelectOptionSelector(selectedOption);
|
|
2497
|
+
}
|
|
2498
|
+
}, [selectedOption]);
|
|
2426
2499
|
const applyActiveOptionClasses = !isInputFocused && Boolean(option);
|
|
2427
2500
|
return jsxs("div", {
|
|
2428
2501
|
className: classNames(`ff-select-wrapper`),
|
|
@@ -2473,7 +2546,7 @@ const Select$1 = ({
|
|
|
2473
2546
|
'ff-select-arrow--no-label': !showLabel
|
|
2474
2547
|
}),
|
|
2475
2548
|
color: iconColor
|
|
2476
|
-
}), jsx("fieldset", {
|
|
2549
|
+
}), (!checkEmpty(option) || showOptions) && jsx("fieldset", {
|
|
2477
2550
|
className: classNames('ff-select-fieldset', {
|
|
2478
2551
|
'ff-select-fieldset--no-label': !showLabel,
|
|
2479
2552
|
'ff-select-fieldset--default': !isInputFocused,
|
|
@@ -2518,7 +2591,7 @@ const Select$1 = ({
|
|
|
2518
2591
|
});
|
|
2519
2592
|
};
|
|
2520
2593
|
|
|
2521
|
-
var css_248z$F = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
2594
|
+
var css_248z$F = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-textarea-container {\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n display: flex;\n color: var(--text-area-default-color);\n justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n padding: 8px;\n width: 100%;\n min-height: 80px;\n gap: 0px;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n border-color: var(--default-icon-color);\n color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n padding: 1px;\n height: 10px;\n width: auto;\n background-color: var(--drawer-footer-bg);\n color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.5px;\n text-align: left;\n top: -6px;\n background-color: transparent;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n letter-spacing: 0.5px;\n top: -6px;\n background-color: transparent;\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n cursor: not-allowed;\n}";
|
|
2522
2595
|
styleInject(css_248z$F);
|
|
2523
2596
|
|
|
2524
2597
|
const truncateText = (text, maxLength) => {
|
|
@@ -2623,7 +2696,7 @@ const StatusButton = ({
|
|
|
2623
2696
|
});
|
|
2624
2697
|
};
|
|
2625
2698
|
|
|
2626
|
-
var css_248z$D = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
2699
|
+
var css_248z$D = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-menu-option-container .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-option-card {\n position: absolute;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n border-radius: 4px;\n margin: 2px;\n min-height: 32px;\n min-width: 111px;\n white-space: nowrap;\n}\n.ff-menu-option-container .ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n padding: 8px;\n line-height: 16px;\n gap: 8px;\n}\n.ff-menu-option-container .ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
|
|
2627
2700
|
styleInject(css_248z$D);
|
|
2628
2701
|
|
|
2629
2702
|
const Option$2 = ({
|
|
@@ -2670,7 +2743,8 @@ const MenuOption = ({
|
|
|
2670
2743
|
iconButtonSize = 20,
|
|
2671
2744
|
iconButtonBorderRadius = 7,
|
|
2672
2745
|
iconSize = 16,
|
|
2673
|
-
variant = 'light'
|
|
2746
|
+
variant = 'light',
|
|
2747
|
+
zIndex = 1000
|
|
2674
2748
|
}) => {
|
|
2675
2749
|
const [isClicked, setIsClicked] = useState(false);
|
|
2676
2750
|
const menuRef = useRef(null);
|
|
@@ -2688,23 +2762,27 @@ const MenuOption = ({
|
|
|
2688
2762
|
case 'top':
|
|
2689
2763
|
return {
|
|
2690
2764
|
bottom: '100%',
|
|
2691
|
-
left: -2
|
|
2765
|
+
left: -2,
|
|
2766
|
+
zIndex
|
|
2692
2767
|
};
|
|
2693
2768
|
case 'left':
|
|
2694
2769
|
return {
|
|
2695
2770
|
top: -2,
|
|
2696
|
-
right: '100%'
|
|
2771
|
+
right: '100%',
|
|
2772
|
+
zIndex
|
|
2697
2773
|
};
|
|
2698
2774
|
case 'right':
|
|
2699
2775
|
return {
|
|
2700
2776
|
top: -2,
|
|
2701
|
-
left: '100%'
|
|
2777
|
+
left: '100%',
|
|
2778
|
+
zIndex
|
|
2702
2779
|
};
|
|
2703
2780
|
case 'down':
|
|
2704
2781
|
default:
|
|
2705
2782
|
return {
|
|
2706
2783
|
top: '100%',
|
|
2707
|
-
left: -2
|
|
2784
|
+
left: -2,
|
|
2785
|
+
zIndex
|
|
2708
2786
|
};
|
|
2709
2787
|
}
|
|
2710
2788
|
};
|
|
@@ -2749,7 +2827,7 @@ const MenuOption = ({
|
|
|
2749
2827
|
});
|
|
2750
2828
|
};
|
|
2751
2829
|
|
|
2752
|
-
var css_248z$C = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
2830
|
+
var css_248z$C = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-table tbody tr td {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-table thead tr th {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 10px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
|
|
2753
2831
|
styleInject(css_248z$C);
|
|
2754
2832
|
|
|
2755
2833
|
const isFunction$2 = functionToCheck => {
|
|
@@ -2798,56 +2876,6 @@ const prepareData = (dataObj, columnObj) => {
|
|
|
2798
2876
|
}
|
|
2799
2877
|
};
|
|
2800
2878
|
|
|
2801
|
-
var css_248z$B = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 8px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n background: var(--brand-color);\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n background-color: var(--brand-color);\n border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n opacity: 1;\n}";
|
|
2802
|
-
styleInject(css_248z$B);
|
|
2803
|
-
|
|
2804
|
-
const Checkbox = ({
|
|
2805
|
-
id,
|
|
2806
|
-
name,
|
|
2807
|
-
label,
|
|
2808
|
-
disabled = false,
|
|
2809
|
-
checked: initialChecked = false,
|
|
2810
|
-
partial = false,
|
|
2811
|
-
onChange
|
|
2812
|
-
}) => {
|
|
2813
|
-
const [checked, setChecked] = useState(initialChecked);
|
|
2814
|
-
useEffect(() => {
|
|
2815
|
-
setChecked(initialChecked);
|
|
2816
|
-
}, [initialChecked]);
|
|
2817
|
-
const handleCheckboxChange = event => {
|
|
2818
|
-
if (!disabled) {
|
|
2819
|
-
setChecked(prev => !prev), onChange?.(event);
|
|
2820
|
-
}
|
|
2821
|
-
};
|
|
2822
|
-
return jsxs("label", {
|
|
2823
|
-
className: "ff-checkbox--overlay",
|
|
2824
|
-
htmlFor: id,
|
|
2825
|
-
children: [jsx("input", {
|
|
2826
|
-
type: "checkbox",
|
|
2827
|
-
className: "ff-checkbox-input",
|
|
2828
|
-
id: id,
|
|
2829
|
-
name: name,
|
|
2830
|
-
checked: checked,
|
|
2831
|
-
onChange: handleCheckboxChange,
|
|
2832
|
-
disabled: disabled
|
|
2833
|
-
}), jsx("span", {
|
|
2834
|
-
className: classNames('ff-checkbox-custom', {
|
|
2835
|
-
'ff-checkbox-checked': checked,
|
|
2836
|
-
'ff-storybook-checkbox--partial': partial && !checked
|
|
2837
|
-
}),
|
|
2838
|
-
children: checked && jsx(Icon, {
|
|
2839
|
-
name: "tick",
|
|
2840
|
-
height: 6,
|
|
2841
|
-
width: 8,
|
|
2842
|
-
color: "var(--primary-icon-color)"
|
|
2843
|
-
})
|
|
2844
|
-
}), jsx(Typography, {
|
|
2845
|
-
as: "span",
|
|
2846
|
-
children: label
|
|
2847
|
-
})]
|
|
2848
|
-
});
|
|
2849
|
-
};
|
|
2850
|
-
|
|
2851
2879
|
// import NoData from '../NoData/NoData';
|
|
2852
2880
|
const Table$1 = ({
|
|
2853
2881
|
data = [],
|
|
@@ -2918,6 +2946,7 @@ const Table$1 = ({
|
|
|
2918
2946
|
width: column?.width
|
|
2919
2947
|
},
|
|
2920
2948
|
children: jsxs("div", {
|
|
2949
|
+
className: 'ff-label-checkbox-container',
|
|
2921
2950
|
children: [index === 0 && withCheckbox && jsx("span", {
|
|
2922
2951
|
className: "ff-table-checkbox",
|
|
2923
2952
|
children: jsx(Checkbox, {
|
|
@@ -2948,6 +2977,7 @@ const Table$1 = ({
|
|
|
2948
2977
|
children: jsxs(Typography, {
|
|
2949
2978
|
as: "div",
|
|
2950
2979
|
color: tableDataTextColor,
|
|
2980
|
+
className: 'ff-data-checkbox-container',
|
|
2951
2981
|
children: [i === 0 && withCheckbox && jsx("span", {
|
|
2952
2982
|
className: "ff-table-checkbox",
|
|
2953
2983
|
children: jsx(Checkbox, {
|
|
@@ -2973,11 +3003,11 @@ const Table$1 = ({
|
|
|
2973
3003
|
});
|
|
2974
3004
|
};
|
|
2975
3005
|
|
|
2976
|
-
var css_248z$
|
|
2977
|
-
styleInject(css_248z$
|
|
3006
|
+
var css_248z$B = ".ff-add-button-container {\n position: relative;\n border: none;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: transparent;\n}\n.ff-add-button-container.ff-hovered-add-button--primary {\n background-color: var(--hover-color);\n}\n.ff-add-button-container .ff-hovered-add-icon--primary svg path {\n fill: var(--add-icon-hover-color);\n}\n.ff-add-button-container .ff-add-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff-add-button-container .ff-add-button {\n position: absolute;\n border: none;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n background: none;\n}";
|
|
3007
|
+
styleInject(css_248z$B);
|
|
2978
3008
|
|
|
2979
|
-
var css_248z$
|
|
2980
|
-
styleInject(css_248z$
|
|
3009
|
+
var css_248z$A = ".ff-arrow-buttons-container {\n position: absolute;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n.ff-arrow-buttons-container.ff-down-right-top, .ff-arrow-buttons-container.ff-down-top {\n height: 80px;\n width: 52px;\n transform: translateY(calc(-50% + 12px));\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--right, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--right {\n top: 28px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--top, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--down, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top {\n height: 52px;\n width: 52px;\n transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--right {\n top: 28px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right {\n height: 52px;\n width: 52px;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--right {\n top: 0px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-top {\n height: 52px;\n width: 24px;\n transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right {\n height: 24px;\n width: 52px;\n}\n.ff-arrow-buttons-container.ff-right .ff-arrow-button--right {\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down {\n height: 52px;\n width: 24px;\n}\n.ff-arrow-buttons-container.ff-down .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container .ff-arrow-button {\n background: var(--arrow-button-bg-color);\n border: 0.5px solid var(--arrows-button-border-color);\n padding: 0;\n cursor: pointer;\n width: 24px;\n height: 24px;\n display: flex;\n border-radius: 4px;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease;\n position: absolute;\n}\n.ff-arrow-buttons-container .ff-arrow-button--top {\n top: 0px;\n left: 0;\n}\n.ff-arrow-buttons-container .ff-arrow-button--down {\n bottom: 0px;\n left: 0;\n}\n@keyframes slideTop {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n 50% {\n transform: translateY(-10px);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideRight {\n from {\n transform: translateX(-20px);\n opacity: 0;\n }\n 50% {\n transform: translateX(10px);\n opacity: 0.5;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n@keyframes slideDown {\n from {\n transform: translateY(-20px);\n opacity: 0;\n }\n 50% {\n transform: translateY(10px);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}";
|
|
3010
|
+
styleInject(css_248z$A);
|
|
2981
3011
|
|
|
2982
3012
|
const ArrowsButton = ({
|
|
2983
3013
|
direction,
|
|
@@ -3114,8 +3144,8 @@ const AddButton = ({
|
|
|
3114
3144
|
});
|
|
3115
3145
|
};
|
|
3116
3146
|
|
|
3117
|
-
var css_248z$
|
|
3118
|
-
styleInject(css_248z$
|
|
3147
|
+
var css_248z$z = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-donut-chart-section {\n display: flex;\n align-items: center;\n padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-weight: 500;\n}\n\n.ff-status-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.ff-status-item {\n display: flex;\n gap: 40px;\n justify-content: space-between;\n opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n opacity: 1;\n}\n.ff-status-item.ff-fade {\n opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n font-weight: 500;\n color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n display: flex;\n gap: 4px;\n font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n font-weight: 400;\n color: var(--brand2-color);\n}\n\n.ff-status-label {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.ff-status-details {\n display: flex;\n gap: 4px;\n}\n\n.ff-status-color {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n opacity: 80%;\n}";
|
|
3148
|
+
styleInject(css_248z$z);
|
|
3119
3149
|
|
|
3120
3150
|
const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
|
|
3121
3151
|
const startX = x + radius * Math.cos(startAngle);
|
|
@@ -3467,8 +3497,8 @@ const useFileDropzone = options => {
|
|
|
3467
3497
|
};
|
|
3468
3498
|
};
|
|
3469
3499
|
|
|
3470
|
-
var css_248z$
|
|
3471
|
-
styleInject(css_248z$
|
|
3500
|
+
var css_248z$y = ".ff-file-dropzone-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n width: 640px;\n height: 188px;\n padding: 16px 0;\n border-radius: 8px;\n background: var(--file-dropzone-default-color);\n border: 1px dashed var(--brand-color);\n display: flex;\n align-items: center;\n flex-direction: column;\n text-align: center;\n gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--active {\n background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n height: 80px;\n width: 80px;\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n margin: 0 auto;\n position: relative;\n font-weight: 600;\n line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 640px;\n max-height: 300px;\n overflow-y: auto;\n scroll-behavior: smooth;\n padding: 2px;\n -ms-overflow-style: none;\n scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px;\n border-radius: 4px;\n background-color: var(--file-details-bg);\n box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n display: flex;\n align-items: center;\n gap: 4px;\n width: 60%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n display: grid;\n place-items: center;\n height: 24px;\n width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n justify-content: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: block;\n color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n display: flex;\n align-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n height: 24px;\n width: 24px;\n display: grid;\n place-items: center;\n cursor: pointer;\n}";
|
|
3501
|
+
styleInject(css_248z$y);
|
|
3472
3502
|
|
|
3473
3503
|
const Dropzone = ({
|
|
3474
3504
|
icon,
|
|
@@ -8240,13 +8270,14 @@ const Forms = ({
|
|
|
8240
8270
|
handleSubmit
|
|
8241
8271
|
} = methods;
|
|
8242
8272
|
return jsx("form", {
|
|
8273
|
+
id: id,
|
|
8243
8274
|
onSubmit: handleSubmit(onSubmit),
|
|
8244
8275
|
children: children(methods)
|
|
8245
8276
|
});
|
|
8246
8277
|
};
|
|
8247
8278
|
|
|
8248
|
-
var css_248z$
|
|
8249
|
-
styleInject(css_248z$
|
|
8279
|
+
var css_248z$x = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-input-with-dropdown-container .ff-helper-text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n display: flex;\n flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n display: flex;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n padding: 0;\n position: relative;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n position: absolute;\n z-index: 9;\n color: var(--input-default-border-color);\n top: 7px;\n left: 7px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n position: relative;\n padding: 6px 7px;\n line-height: 18px;\n border: none;\n outline: none;\n border-right: 1px solid var(--input-default-border-color);\n border-radius: 4px 0 0 4px;\n top: 1px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n cursor: not-allowed;\n background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n min-width: 120px;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n cursor: not-allowed;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n border-color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label--filled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n top: -6px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n color: var(--input-active-text-color);\n line-height: 12px;\n font-size: 8px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n top: -6px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n line-height: 12px;\n font-size: 8px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n color: var(--input-error-text-color);\n padding: 0 11px;\n}";
|
|
8280
|
+
styleInject(css_248z$x);
|
|
8250
8281
|
|
|
8251
8282
|
const InputWithDropdown = ({
|
|
8252
8283
|
name = '',
|
|
@@ -8326,8 +8357,8 @@ const InputWithDropdown = ({
|
|
|
8326
8357
|
});
|
|
8327
8358
|
};
|
|
8328
8359
|
|
|
8329
|
-
var css_248z$
|
|
8330
|
-
styleInject(css_248z$
|
|
8360
|
+
var css_248z$w = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radio-wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n position: relative;\n color: var(--text-color);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n box-sizing: content-box;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 1px solid var(--radio-button-border);\n position: relative;\n margin-right: 8px;\n transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n content: \"\";\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #fbfdff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 4px solid #f7edff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n opacity: 1;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n background: var(--brand-color);\n height: 12px;\n width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n border: 4px solid var(--radio-button-hover);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n border-color: var(--brand-color);\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n cursor: default;\n opacity: 0.5;\n}";
|
|
8361
|
+
styleInject(css_248z$w);
|
|
8331
8362
|
|
|
8332
8363
|
const RadioButton = ({
|
|
8333
8364
|
label,
|
|
@@ -8364,8 +8395,8 @@ const RadioButton = ({
|
|
|
8364
8395
|
});
|
|
8365
8396
|
};
|
|
8366
8397
|
|
|
8367
|
-
var css_248z$
|
|
8368
|
-
styleInject(css_248z$
|
|
8398
|
+
var css_248z$v = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}";
|
|
8399
|
+
styleInject(css_248z$v);
|
|
8369
8400
|
|
|
8370
8401
|
const RadioGroup = ({
|
|
8371
8402
|
options,
|
|
@@ -8390,8 +8421,8 @@ const RadioGroup = ({
|
|
|
8390
8421
|
});
|
|
8391
8422
|
};
|
|
8392
8423
|
|
|
8393
|
-
var css_248z$
|
|
8394
|
-
styleInject(css_248z$
|
|
8424
|
+
var css_248z$u = ".ff-mini-edit-modal-container {\n width: fit-content;\n padding: 0;\n position: absolute;\n visibility: hidden;\n}\n.ff-mini-edit-modal-container.modalVisible {\n visibility: visible;\n}\n.ff-mini-edit-modal-container.animatedModal {\n animation: slideDown 0.5s ease, opacity 0.5s ease;\n}\n.ff-mini-edit-modal-container .popover-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n z-index: 5;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n bottom: 100%;\n left: 30px;\n border-width: 0 10px 10px 10px;\n padding: 0 3px 0 0;\n border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 4px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -0.5px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n left: -15px;\n border-width: 10px 10px 10px 0;\n border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n top: 100%;\n left: 30px;\n border-width: 10px 10px 0 10px;\n border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -2px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n right: -10px;\n top: 66px;\n border-width: 10px 0 10px 10px;\n border-color: transparent transparent transparent var(--ff-mini-modal-border);\n filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n width: 35px;\n height: 35px;\n background-color: transparent;\n outline: 8px solid var(--ff-mini-modal-border);\n outline-offset: -8px;\n position: absolute;\n top: -34px;\n z-index: 10;\n border-radius: 7px 7px 0 0;\n box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n position: absolute;\n content: \"\";\n width: 13px;\n height: 13px;\n background: transparent;\n border-radius: 50%;\n bottom: 0;\n box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n left: -13px;\n clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n right: -13px;\n clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-height: fit-content;\n z-index: 2;\n padding: 4px;\n width: 100%;\n border-radius: 7px;\n margin: 0 0 0 -5px;\n height: 100%;\n box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .modal-content {\n max-height: 250px;\n overflow-y: auto;\n}\n.ff-mini-edit-modal-container .modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 5px;\n background-color: var(--ff-mini-modal-footer-background);\n height: 24px;\n padding: 0 10px 0 0;\n transition: transform 0.3s ease-in-out;\n}\n@keyframes slideDown {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.ff-mini-modal-buttons-flex {\n display: flex;\n}\n\n.ff-mini-modal-gap-10 {\n gap: 10px;\n}\n\n.ff-mini-edit-model-icon {\n color: var(--ff-mini-modal-box-shadow);\n border: 2px solid var(--ff-mini-modal-box-shadow);\n border-radius: 4px;\n}";
|
|
8425
|
+
styleInject(css_248z$u);
|
|
8395
8426
|
|
|
8396
8427
|
const MiniModal = /*#__PURE__*/forwardRef(({
|
|
8397
8428
|
anchorRef,
|
|
@@ -8608,8 +8639,8 @@ const MiniModal = /*#__PURE__*/forwardRef(({
|
|
|
8608
8639
|
}), document.body);
|
|
8609
8640
|
});
|
|
8610
8641
|
|
|
8611
|
-
var css_248z$
|
|
8612
|
-
styleInject(css_248z$
|
|
8642
|
+
var css_248z$t = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-tree-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tree-container {\n width: 100%;\n font-size: 12px;\n color: var(--brand-color);\n transition: all 0.3s ease;\n}\n.ff-tree-container table {\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n}\n.ff-tree-container .ff-toggle-arrow-icon {\n height: 12px;\n width: 12px;\n margin-left: 8px;\n display: grid;\n place-items: center;\n transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon svg path {\n fill: var(--brand-color);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-expanded {\n transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-collapsed {\n transform: rotate(-90deg);\n}\n.ff-tree-container th,\n.ff-tree-container td {\n padding: 0 8px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ff-tree-container th {\n vertical-align: middle;\n height: 32px;\n background-color: var(--slider-table-color);\n color: var(--text-color);\n font-weight: 600;\n text-transform: uppercase;\n}\n.ff-tree-container tr .ff-action-section {\n display: none;\n}\n.ff-tree-container tr:hover {\n background-color: var(--hover-color);\n}\n.ff-tree-container tr:hover .ff-title-action-container {\n display: flex;\n}\n.ff-tree-container .ff-title-container {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-tree-container .ff-title-container .ff-toggle-folder {\n display: flex;\n cursor: pointer;\n}\n.ff-tree-container .ff-title-container.ff-folder {\n font-weight: 600;\n}\n.ff-tree-container .ff-title-container.ff-file {\n font-weight: 400;\n}\n.ff-tree-container .ff-title-container .ff-title {\n display: flex;\n gap: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 400;\n cursor: pointer;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-title-label {\n display: flex;\n align-items: center;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-hover-icon {\n display: none;\n position: absolute;\n right: 10px;\n}\n.ff-tree-container .ff-node-li {\n position: relative;\n --indent-size: 18px;\n --total-children-height: var(--node-height);\n}\n.ff-tree-container .ff-node-li td:first-child {\n padding-left: calc(var(--level) * var(--indent-size));\n height: 32px;\n}\n.ff-tree-container .ff-node-li::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--level) * var(--indent-size) - 4px);\n width: 1px;\n height: calc(var(--total-children-height));\n background-color: var(--tree-connecting-lines-color);\n z-index: 1;\n}\n.ff-tree-container .ff-node-li::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: calc(var(--level) * var(--indent-size) - 4px);\n width: 12px;\n height: 1px;\n background-color: var(--tree-connecting-lines-color);\n z-index: 1;\n}\n.ff-tree-container .ff-node-li.ff-is-last::before {\n height: calc(var(--node-height) / 2);\n}\n.ff-tree-container .ff-node-li[style*=\"--level: 0\"]::before, .ff-tree-container .ff-node-li[style*=\"--level: 0\"]::after {\n content: none;\n}\n\n.ff-title-action-container {\n display: none;\n align-items: center;\n}";
|
|
8643
|
+
styleInject(css_248z$t);
|
|
8613
8644
|
|
|
8614
8645
|
const TableTree = ({
|
|
8615
8646
|
columnsData,
|
|
@@ -8706,11 +8737,7 @@ const TableTree = ({
|
|
|
8706
8737
|
onClick: handleToggleExpand,
|
|
8707
8738
|
children: node.folder && jsx("span", {
|
|
8708
8739
|
className: `ff-toggle-arrow-icon ${isExpanded ? 'ff-expanded' : 'ff-collapsed'}`,
|
|
8709
|
-
children: jsx(
|
|
8710
|
-
name: "arrows_down_icon",
|
|
8711
|
-
height: 12,
|
|
8712
|
-
width: 12
|
|
8713
|
-
})
|
|
8740
|
+
children: jsx(SvgArrowsDownIcon, {})
|
|
8714
8741
|
})
|
|
8715
8742
|
}), jsxs("div", {
|
|
8716
8743
|
className: "ff-title",
|
|
@@ -8792,8 +8819,8 @@ const TableTree = ({
|
|
|
8792
8819
|
});
|
|
8793
8820
|
};
|
|
8794
8821
|
|
|
8795
|
-
var css_248z$
|
|
8796
|
-
styleInject(css_248z$
|
|
8822
|
+
var css_248z$s = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}\n\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px 8px 0 0;\n padding: 7px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n border: none;\n background: none;\n padding: 0 4px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-label {\n padding-bottom: 4px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}";
|
|
8823
|
+
styleInject(css_248z$s);
|
|
8797
8824
|
|
|
8798
8825
|
const Tabs = ({
|
|
8799
8826
|
variant = 'default',
|
|
@@ -8838,8 +8865,8 @@ const Tabs = ({
|
|
|
8838
8865
|
});
|
|
8839
8866
|
};
|
|
8840
8867
|
|
|
8841
|
-
var css_248z$
|
|
8842
|
-
styleInject(css_248z$
|
|
8868
|
+
var css_248z$r = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
|
|
8869
|
+
styleInject(css_248z$r);
|
|
8843
8870
|
|
|
8844
8871
|
// Function to escape special characters in the search term
|
|
8845
8872
|
const escapeRegExp = text => {
|
|
@@ -8862,8 +8889,8 @@ const HighlightText = ({
|
|
|
8862
8889
|
});
|
|
8863
8890
|
};
|
|
8864
8891
|
|
|
8865
|
-
var css_248z$
|
|
8866
|
-
styleInject(css_248z$
|
|
8892
|
+
var css_248z$q = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-search-container .ff-search-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-search-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n padding: 4px;\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n border: none;\n color: var(--tooltip-bg-color);\n line-height: 12px;\n visibility: hidden;\n transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n outline: none;\n border: none;\n}\n.ff-search-container .ff-search-input:hover {\n border: none;\n}\n.ff-search-container.disabled {\n opacity: 0.5;\n}\n.ff-search-container.expanded {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n position: relative;\n right: 2px;\n border-radius: 1px;\n margin: 8px 0px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n padding: 4px;\n border: none;\n cursor: default;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n margin: 4px;\n cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n fill: var(--ff-search-filed-close-Icon);\n}";
|
|
8893
|
+
styleInject(css_248z$q);
|
|
8867
8894
|
|
|
8868
8895
|
const Search = ({
|
|
8869
8896
|
placeholder = 'Search',
|
|
@@ -16871,8 +16898,8 @@ const TimePicker = ({
|
|
|
16871
16898
|
});
|
|
16872
16899
|
};
|
|
16873
16900
|
|
|
16874
|
-
var css_248z$o = "@import 'react-day-picker/style.css';\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n position: relative;\n}\n.ff-date-picker .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n transform: translate(50%, 50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: absolute;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 4px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: fixed;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}";
|
|
16875
|
-
styleInject(css_248z$
|
|
16901
|
+
var css_248z$p = "@import 'react-day-picker/style.css';\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n position: relative;\n}\n.ff-date-picker .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n font-family: \"Poppins\";\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n transform: translate(50%, 50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: absolute;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 4px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: fixed;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}";
|
|
16902
|
+
styleInject(css_248z$p);
|
|
16876
16903
|
|
|
16877
16904
|
const CustomDatePicker = ({
|
|
16878
16905
|
minDate,
|
|
@@ -17392,8 +17419,8 @@ const StateDropdown = ({
|
|
|
17392
17419
|
});
|
|
17393
17420
|
};
|
|
17394
17421
|
|
|
17395
|
-
var css_248z$
|
|
17396
|
-
styleInject(css_248z$
|
|
17422
|
+
var css_248z$o = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-plus-icon {\n border-radius: 16px;\n border-style: none;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 8px;\n background-color: var(--secondary-icon-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid transparent;\n}\n.ff-plus-icon .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--hover-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}\n.ff-plus-icon .icon-name {\n color: var(--primary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover {\n border: 1px solid var(--secondary-icon-color);\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\n color: var(--secondary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}";
|
|
17423
|
+
styleInject(css_248z$o);
|
|
17397
17424
|
|
|
17398
17425
|
const IconButton = ({
|
|
17399
17426
|
label,
|
|
@@ -17421,8 +17448,8 @@ const IconButton = ({
|
|
|
17421
17448
|
});
|
|
17422
17449
|
};
|
|
17423
17450
|
|
|
17424
|
-
var css_248z$
|
|
17425
|
-
styleInject(css_248z$
|
|
17451
|
+
var css_248z$n = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--background-modal-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n}\n\n.ff-modal-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 8px;\n}\n.ff-modal-content .ff-modal-header {\n height: 32px;\n width: 100%;\n}\n\n.modal-bottom-border {\n border-bottom-left-radius: 12px;\n border-bottom-right-radius: 12px;\n}\n\n.modal-top-border {\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n}\n\n.ff-modal-footer {\n background-color: var(--expandable-menu-option-bg);\n max-width: 100%;\n width: 100%;\n height: 32px;\n border-radius: 0 0 12px 12px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n}";
|
|
17452
|
+
styleInject(css_248z$n);
|
|
17426
17453
|
|
|
17427
17454
|
const Modal = ({
|
|
17428
17455
|
isOpen,
|
|
@@ -22108,8 +22135,8 @@ const DragAndDrop = {
|
|
|
22108
22135
|
DNDUtilities
|
|
22109
22136
|
};
|
|
22110
22137
|
|
|
22111
|
-
var css_248z$
|
|
22112
|
-
styleInject(css_248z$
|
|
22138
|
+
var css_248z$m = ".ff_variable_input_container .ff_label_container {\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n color: var(--input-error-text-color);\n font-size: 1.1em;\n margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n color: var(--toggle-disable-icon-color);\n cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n min-width: 8rem;\n border: 1px solid var(--input-default-border-color);\n padding: 8px;\n min-height: 30px;\n border-radius: 4px;\n font-family: Arial, sans-serif;\n font-size: 14px;\n line-height: 20px;\n transition: border-color 0.2s ease;\n position: relative;\n text-align: left;\n display: flex;\n align-items: center;\n overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n content: \"*\";\n color: var(--input-error-text-color);\n font-size: 1.2em;\n position: absolute;\n top: 2px;\n right: 2px;\n display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n content: attr(data-placeholder);\n color: var(--ff-search-filed-placeholder-text);\n position: absolute;\n user-select: none;\n pointer-events: none;\n font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n pointer-events: none;\n opacity: 0.5;\n background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n border: 1px solid var(--input-default-border-color);\n margin-top: 4px;\n padding: 4px;\n border-radius: 4px;\n list-style-type: none;\n background-color: var(--ff-select-background-color);\n max-height: 150px;\n overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n padding: 4px;\n cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n background-color: var(--ff-select-background-color);\n}";
|
|
22139
|
+
styleInject(css_248z$m);
|
|
22113
22140
|
|
|
22114
22141
|
const VariableInput = ({
|
|
22115
22142
|
type = 'url',
|
|
@@ -22387,8 +22414,8 @@ const VariableInput = ({
|
|
|
22387
22414
|
});
|
|
22388
22415
|
};
|
|
22389
22416
|
|
|
22390
|
-
var css_248z$
|
|
22391
|
-
styleInject(css_248z$
|
|
22417
|
+
var css_248z$l = ".ff-all-project {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n background-color: var(--secondary-icon-color);\n color: var(--expandable-menu-default-bg);\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 10px;\n padding: 4px;\n}\n.ff-all-project .ff-all-project-dropdown .label-icon {\n height: 16px;\n width: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-all-project .ff-dropdown {\n position: absolute;\n top: 50px;\n padding: 1px;\n border: 0.5px solid var(--expandable-menu-default-bg);\n border-radius: 4px;\n background-color: var(--secondary-icon-color);\n color: var(--primary-icon-color);\n}\n.ff-all-project .ff-dropdown .ff-search {\n margin-bottom: 1px;\n}\n.ff-all-project .ff-dropdown .ff-search input {\n height: 30px;\n width: inherit;\n border-radius: 4px;\n border-style: none;\n}\n.ff-all-project .ff-dropdown .ff-search input::placeholder {\n padding-left: 28px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-dropdown .ff-search span {\n position: absolute;\n top: 11px;\n left: 8px;\n}\n.ff-all-project .ff-dropdown .all-projects-option {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n background-color: var(--primary-icon-color);\n border-radius: 4px;\n}\n.ff-all-project .ff-dropdown .scroll {\n max-height: 90px;\n overflow-y: scroll;\n}\n.ff-all-project .ff-dropdown .scroll::-webkit-scrollbar {\n width: 2px;\n}\n.ff-all-project .ff-dropdown .scroll::-webkit-scrollbar-thumb {\n background: var(--primary-icon-color);\n border-radius: 2px;\n}\n.ff-all-project .ff-dropdown .option-card .projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n}\n.ff-all-project .ff-dropdown .option-card .projects-options .projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}";
|
|
22418
|
+
styleInject(css_248z$l);
|
|
22392
22419
|
|
|
22393
22420
|
const AllProjectsDropdown = ({
|
|
22394
22421
|
onClick = () => {},
|
|
@@ -22422,7 +22449,6 @@ const AllProjectsDropdown = ({
|
|
|
22422
22449
|
return jsxs("div", {
|
|
22423
22450
|
className: classNames('ff-all-project'),
|
|
22424
22451
|
children: [jsxs("div", {
|
|
22425
|
-
onClick: handleShowOption,
|
|
22426
22452
|
className: classNames('ff-all-project-dropdown'),
|
|
22427
22453
|
children: [jsx(Typography, {
|
|
22428
22454
|
as: 'div',
|
|
@@ -22433,6 +22459,7 @@ const AllProjectsDropdown = ({
|
|
|
22433
22459
|
children: truncateText(selectedOptions?.label, 12)
|
|
22434
22460
|
}), jsx("div", {
|
|
22435
22461
|
className: classNames('label-icon'),
|
|
22462
|
+
onClick: handleShowOption,
|
|
22436
22463
|
children: jsx(Icon, {
|
|
22437
22464
|
name: "arrows_down_icon",
|
|
22438
22465
|
color: "var(--primary-icon-color)",
|
|
@@ -22455,18 +22482,39 @@ const AllProjectsDropdown = ({
|
|
|
22455
22482
|
placeholder: `${search ? 'Search Project' : ''}`,
|
|
22456
22483
|
onClick: () => handleInput()
|
|
22457
22484
|
})]
|
|
22485
|
+
}), jsxs("div", {
|
|
22486
|
+
onClick: () => handleSelectOption({
|
|
22487
|
+
label: 'All Projects',
|
|
22488
|
+
value: 'All Projects',
|
|
22489
|
+
iconName: 'all_projects'
|
|
22490
|
+
}),
|
|
22491
|
+
className: classNames('projects-options', 'all-projects-option'),
|
|
22492
|
+
children: [jsx("div", {
|
|
22493
|
+
className: classNames('projects-icons'),
|
|
22494
|
+
children: jsx(Icon, {
|
|
22495
|
+
name: 'all_projects',
|
|
22496
|
+
height: 12,
|
|
22497
|
+
width: 12,
|
|
22498
|
+
color: 'var(--secondary-icon-color)'
|
|
22499
|
+
})
|
|
22500
|
+
}), jsx(Typography, {
|
|
22501
|
+
as: 'div',
|
|
22502
|
+
lineHeight: '30px',
|
|
22503
|
+
color: 'var(--secondary-icon-color)',
|
|
22504
|
+
children: 'All Projects'
|
|
22505
|
+
})]
|
|
22458
22506
|
}), jsx("div", {
|
|
22459
22507
|
className: classNames('option-card', `${options.length > 4 ? 'scroll' : ''}`),
|
|
22460
22508
|
children: options.map((option, index) => jsxs("div", {
|
|
22461
22509
|
onClick: () => handleSelectOption(option),
|
|
22462
|
-
className: classNames('projects-options'
|
|
22510
|
+
className: classNames('projects-options'),
|
|
22463
22511
|
children: [jsx("div", {
|
|
22464
22512
|
className: classNames('projects-icons'),
|
|
22465
22513
|
children: jsx(Icon, {
|
|
22466
22514
|
name: option.iconName,
|
|
22467
22515
|
height: 12,
|
|
22468
22516
|
width: 12,
|
|
22469
|
-
color:
|
|
22517
|
+
color: 'var(--primary-icon-color)'
|
|
22470
22518
|
})
|
|
22471
22519
|
}), jsx(Typography, {
|
|
22472
22520
|
as: 'div',
|
|
@@ -22479,8 +22527,8 @@ const AllProjectsDropdown = ({
|
|
|
22479
22527
|
});
|
|
22480
22528
|
};
|
|
22481
22529
|
|
|
22482
|
-
var css_248z$
|
|
22483
|
-
styleInject(css_248z$
|
|
22530
|
+
var css_248z$k = ".ff-pie-chart-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n display: inline-block;\n border: 2px solid var(--pie-chart-border-color);\n border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -100%);\n padding: 8px;\n border-radius: 4px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n border: 10px solid;\n font-size: 14px;\n font-weight: 400;\n pointer-events: none;\n opacity: 0.8;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}";
|
|
22531
|
+
styleInject(css_248z$k);
|
|
22484
22532
|
|
|
22485
22533
|
const calculateArc$1 = ({
|
|
22486
22534
|
x,
|
|
@@ -22635,8 +22683,8 @@ const PieChart = ({
|
|
|
22635
22683
|
});
|
|
22636
22684
|
};
|
|
22637
22685
|
|
|
22638
|
-
var css_248z$
|
|
22639
|
-
styleInject(css_248z$
|
|
22686
|
+
var css_248z$j = ".ff-app-header {\n display: flex;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n.ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n background-color: var(--brand-color);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-submenu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 10%;\n width: 90%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header .ff-app-header-left-content,\n.ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}";
|
|
22687
|
+
styleInject(css_248z$j);
|
|
22640
22688
|
|
|
22641
22689
|
const AppHeader = ({
|
|
22642
22690
|
logoIconName = 'fireflink_icon',
|
|
@@ -22750,8 +22798,8 @@ const AppHeader = ({
|
|
|
22750
22798
|
});
|
|
22751
22799
|
};
|
|
22752
22800
|
|
|
22753
|
-
var css_248z$
|
|
22754
|
-
styleInject(css_248z$
|
|
22801
|
+
var css_248z$i = ".ff_rounded_lg {\n border-radius: 8px;\n}\n\n.ff_paper_basic_style {\n padding: 20px;\n background-color: var(--ff-paper-dark-background-color);\n}\n\n.ff_paper_default_style {\n padding: 20px;\n background-color: var(--ff-paper-background-color);\n}";
|
|
22802
|
+
styleInject(css_248z$i);
|
|
22755
22803
|
|
|
22756
22804
|
const Paper = ({
|
|
22757
22805
|
children,
|
|
@@ -22767,8 +22815,8 @@ const Paper = ({
|
|
|
22767
22815
|
});
|
|
22768
22816
|
};
|
|
22769
22817
|
|
|
22770
|
-
var css_248z$
|
|
22771
|
-
styleInject(css_248z$
|
|
22818
|
+
var css_248z$h = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n position: fixed;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: grid;\n gap: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend {\n grid-template-columns: repeat(3, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend {\n grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 15px;\n min-width: 25px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend {\n grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-right: 10px;\n border-right: 1px solid var(--border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item:nth-child(2n) {\n border-right: none;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n overflow: hidden;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n width: 100%;\n min-width: 300px;\n border-collapse: collapse;\n text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n font-weight: bold;\n background-color: var(--tabs-bg-color);\n color: var(--input-hover-border-color);\n padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n text-align: right;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 1rem;\n min-width: 22px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n padding: 0.5rem;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n display: flex;\n align-items: baseline;\n gap: 5px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n text-align: right;\n}";
|
|
22819
|
+
styleInject(css_248z$h);
|
|
22772
22820
|
|
|
22773
22821
|
const calculateArc = (x, y, radius, startAngle, endAngle) => {
|
|
22774
22822
|
const startX = x + radius * Math.cos(startAngle);
|
|
@@ -24751,8 +24799,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
|
|
|
24751
24799
|
} : {}
|
|
24752
24800
|
})(ReCAPTCHA);
|
|
24753
24801
|
|
|
24754
|
-
var css_248z$
|
|
24755
|
-
styleInject(css_248z$
|
|
24802
|
+
var css_248z$g = ".ff-recaptcha-wrapper {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n color: var(--input-error-text-color);\n font-size: 12px;\n margin-top: 4px;\n}";
|
|
24803
|
+
styleInject(css_248z$g);
|
|
24756
24804
|
|
|
24757
24805
|
const Recaptcha = /*#__PURE__*/forwardRef(({
|
|
24758
24806
|
onVerify,
|
|
@@ -24795,8 +24843,8 @@ const nlpDropdownDefaultCSSData = {
|
|
|
24795
24843
|
dropDownWrapperPadding: 0
|
|
24796
24844
|
};
|
|
24797
24845
|
|
|
24798
|
-
var css_248z$
|
|
24799
|
-
styleInject(css_248z$
|
|
24846
|
+
var css_248z$f = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n max-height: 160px;\n z-index: 100;\n position: absolute;\n min-width: 100px;\n border: 1px solid var(--ff-select-option-border-color);\n box-sizing: border-box;\n margin-top: 4px;\n border-radius: 4px;\n background-color: var(--ff-select-background-color);\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: hidden auto;\n display: flex;\n justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n max-height: 160px;\n z-index: 100;\n min-width: auto;\n box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n background-color: transparent;\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n width: calc(100% - 18px);\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n border-color: var(--ff-select-background-color);\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n width: calc(100% - 16px);\n margin: 0;\n overflow: hidden;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n width: 200px;\n height: 134px;\n border: 1px solid transparent;\n border-radius: 5px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: scroll;\n}";
|
|
24847
|
+
styleInject(css_248z$f);
|
|
24800
24848
|
|
|
24801
24849
|
const NlpDropdown = ({
|
|
24802
24850
|
onSelectBlur,
|
|
@@ -24960,8 +25008,8 @@ const NlpDropdown = ({
|
|
|
24960
25008
|
});
|
|
24961
25009
|
};
|
|
24962
25010
|
|
|
24963
|
-
var css_248z$
|
|
24964
|
-
styleInject(css_248z$
|
|
25011
|
+
var css_248z$e = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 489px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n margin: 0;\n padding: 25px 0px 0px 8px;\n border: 1px solid transparent;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n opacity: 0;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n opacity: 1;\n border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: calc(100% - 38px);\n min-height: calc(100% - 8px);\n padding: 0 28px 0 8px;\n border-radius: 4px;\n border: 1px solid transparent;\n z-index: 100;\n background: transparent;\n outline: none;\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n opacity: 1;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n position: absolute;\n top: 13px;\n right: auto;\n bottom: auto;\n left: 8px;\n z-index: 1;\n font-size: 12px;\n top: 60%;\n padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n transform: translateY(-150%);\n padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n position: absolute;\n top: 60%;\n height: 100%;\n right: 10px;\n transform: rotateX(180deg) translateY(50%);\n cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n transform: rotateX(0deg) translateY(-50%);\n z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}";
|
|
25012
|
+
styleInject(css_248z$e);
|
|
24965
25013
|
|
|
24966
25014
|
const nlpInputReducer = (state, action) => {
|
|
24967
25015
|
switch (action.type) {
|
|
@@ -25272,8 +25320,8 @@ const NlpInput = ({
|
|
|
25272
25320
|
});
|
|
25273
25321
|
};
|
|
25274
25322
|
|
|
25275
|
-
var css_248z$
|
|
25276
|
-
styleInject(css_248z$
|
|
25323
|
+
var css_248z$d = ".ff-icon-radio-group {\n width: 237px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 47px;\n position: relative;\n}\n\n.ff-icon-radio-button {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n position: relative;\n}\n.ff-icon-radio-button.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n opacity: 50%;\n cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--border-color);\n background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n width: 14px;\n height: 14px;\n}\n\n.line-connector {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background-color: var(--border-color);\n z-index: -1;\n border-radius: 2px 0px 0px 0px;\n opacity: 0px;\n}";
|
|
25324
|
+
styleInject(css_248z$d);
|
|
25277
25325
|
|
|
25278
25326
|
const IconRadioGroup = ({
|
|
25279
25327
|
items,
|
|
@@ -25323,8 +25371,8 @@ const IconRadioGroup = ({
|
|
|
25323
25371
|
});
|
|
25324
25372
|
};
|
|
25325
25373
|
|
|
25326
|
-
var css_248z$
|
|
25327
|
-
styleInject(css_248z$
|
|
25374
|
+
var css_248z$c = ".ff-machine-input-field-wrapper {\n min-width: 100px;\n height: 32px;\n position: relative;\n cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n height: 100%;\n width: 100%;\n border: 1px solid var(--ff-machine-input-field-border-color);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-around;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n display: flex;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n margin-right: 8px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n position: absolute;\n top: -6px;\n left: 8px;\n background-color: var(--ff-machine-input-field-border-color);\n border-radius: 4px;\n padding: 1px 2px;\n height: 10px;\n}";
|
|
25375
|
+
styleInject(css_248z$c);
|
|
25328
25376
|
|
|
25329
25377
|
const MachineInputField = /*#__PURE__*/forwardRef(({
|
|
25330
25378
|
width = '',
|
|
@@ -25377,11 +25425,11 @@ const MachineInputField = /*#__PURE__*/forwardRef(({
|
|
|
25377
25425
|
});
|
|
25378
25426
|
MachineInputField.displayName = 'MachineInputField';
|
|
25379
25427
|
|
|
25380
|
-
var css_248z$
|
|
25381
|
-
styleInject(css_248z$
|
|
25428
|
+
var css_248z$b = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n height: 66px;\n box-sizing: border-box;\n width: fit-content;\n margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n margin-top: 4px;\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n width: 6px;\n height: 6px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(100% 50%, 0 100%, 0 0);\n position: absolute;\n right: -1px;\n top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -3px;\n z-index: 102;\n top: 50%;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .branch-button {\n margin-top: 4px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n position: absolute;\n height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n top: 50%;\n left: -2px;\n z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n width: 0px;\n height: 62px;\n top: calc(50% + 1px);\n border-left: 1px solid var(--ff-connecting-branch-color);\n z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n box-sizing: border-box;\n width: 240px;\n margin-top: 4px;\n padding: 0px 4px;\n display: flex;\n justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n display: flex;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n margin-left: 4px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n margin: 0px 12px 0px 4px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n box-sizing: border-box;\n width: fit-content;\n height: fit-content;\n}";
|
|
25429
|
+
styleInject(css_248z$b);
|
|
25382
25430
|
|
|
25383
|
-
var css_248z$
|
|
25384
|
-
styleInject(css_248z$
|
|
25431
|
+
var css_248z$a = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 24px 180px 40px 180px 24px;\n height: 66px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n left: -2px;\n top: calc(25% - 3px);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-left: none;\n border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n right: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n left: -4px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n height: 0px;\n width: 100%;\n margin-top: calc(50% - 3px);\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 4px);\n right: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n top: calc(25% - 4px);\n left: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-right: 1px solid var(--ff-connecting-branch-color);\n border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-left: 1px solid var(--ff-connecting-branch-color);\n border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n height: 32px;\n display: flex;\n align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n direction: rtl;\n margin: 0px 0px 16px 0px;\n}";
|
|
25432
|
+
styleInject(css_248z$a);
|
|
25385
25433
|
|
|
25386
25434
|
const Branches = ({
|
|
25387
25435
|
machineInstances,
|
|
@@ -25528,8 +25576,8 @@ const Branches = ({
|
|
|
25528
25576
|
});
|
|
25529
25577
|
};
|
|
25530
25578
|
|
|
25531
|
-
var css_248z$
|
|
25532
|
-
styleInject(css_248z$
|
|
25579
|
+
var css_248z$9 = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
|
|
25580
|
+
styleInject(css_248z$9);
|
|
25533
25581
|
|
|
25534
25582
|
const ConnectingBranches = ({
|
|
25535
25583
|
machineBranchInstances,
|
|
@@ -25569,8 +25617,8 @@ const ConnectingBranches = ({
|
|
|
25569
25617
|
});
|
|
25570
25618
|
};
|
|
25571
25619
|
|
|
25572
|
-
var css_248z$
|
|
25573
|
-
styleInject(css_248z$
|
|
25620
|
+
var css_248z$8 = ".ff-datalist-modal-header-wrapper,\n.ff-datalist-modal-child-wrapper,\n.ff-datalist-modal-footer-wrapper {\n margin: 0 8px;\n}\n\n.ff-datalist-modal-header-wrapper {\n width: 255px;\n border-bottom: 1px solid var(--ff-connecting-branch-modal-border);\n display: flex;\n align-items: center;\n}\n\n.ff-datalist-modal-child-wrapper .variable {\n margin: 8px 0;\n}\n\n.ff-datalist-modal-footer-wrapper {\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--ff-connecting-branch-modal-border);\n}\n.ff-datalist-modal-footer-wrapper .datalist-button-wrapper {\n display: flex;\n gap: 10px;\n margin-top: 4px;\n justify-content: flex-end;\n}";
|
|
25621
|
+
styleInject(css_248z$8);
|
|
25574
25622
|
|
|
25575
25623
|
const DatasetListModal = /*#__PURE__*/forwardRef((props, ref) => {
|
|
25576
25624
|
const selectOptions = [{
|
|
@@ -25647,8 +25695,8 @@ const DatasetListModal = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
25647
25695
|
});
|
|
25648
25696
|
});
|
|
25649
25697
|
|
|
25650
|
-
var css_248z$
|
|
25651
|
-
styleInject(css_248z$
|
|
25698
|
+
var css_248z$7 = ".ff-connecting-datalist-modal-header-wrapper,\n.ff-connecting-modal-child-wrapper {\n width: 534px;\n padding: 0 4px;\n}\n\n.ff-connecting-datalist-modal-header-wrapper {\n border-bottom: 1px solid var(--ff-connecting-branch-modal-border);\n margin-bottom: 4px;\n}\n\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-select-browser {\n width: 263px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-branch-input-wrapper {\n display: flex;\n align-items: flex-end;\n height: 38px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-branch-input-wrapper .ff-input-browser {\n width: 245px;\n}\n\n.ff-connecting-modal-footer-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 8px;\n margin-top: 8px;\n border-top: 1px solid var(--ff-connecting-branch-modal-border);\n}\n.ff-connecting-modal-footer-wrapper .ff-branch-toggle-wrapper,\n.ff-connecting-modal-footer-wrapper .ff-datalist-button-wrapper {\n display: flex;\n gap: 8px;\n}\n.ff-connecting-modal-footer-wrapper .ff-branch-toggle-wrapper {\n gap: 4px;\n}";
|
|
25699
|
+
styleInject(css_248z$7);
|
|
25652
25700
|
|
|
25653
25701
|
const AddBrowserModal = /*#__PURE__*/forwardRef((props, ref) => {
|
|
25654
25702
|
// TODO: WILL BE REMOVE IN THE FUTURE
|
|
@@ -25911,8 +25959,8 @@ const SequentialConnectingBranch = ({
|
|
|
25911
25959
|
});
|
|
25912
25960
|
};
|
|
25913
25961
|
|
|
25914
|
-
var css_248z$
|
|
25915
|
-
styleInject(css_248z$
|
|
25962
|
+
var css_248z$6 = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n padding: 9px;\n display: flex;\n align-items: center;\n gap: 4px;\n}";
|
|
25963
|
+
styleInject(css_248z$6);
|
|
25916
25964
|
|
|
25917
25965
|
const AttachmentButton = ({
|
|
25918
25966
|
label,
|
|
@@ -26010,13 +26058,33 @@ const Toastify = () => {
|
|
|
26010
26058
|
toastMessage: ''
|
|
26011
26059
|
});
|
|
26012
26060
|
const timeoutRef = useRef(null);
|
|
26013
|
-
openToast = (variant,
|
|
26061
|
+
openToast = (variant, arg1, arg2) => {
|
|
26014
26062
|
// Clear the previous timeout if it exists
|
|
26015
26063
|
if (timeoutRef.current) {
|
|
26016
26064
|
clearTimeout(timeoutRef.current);
|
|
26017
26065
|
timeoutRef.current = null;
|
|
26018
26066
|
}
|
|
26019
|
-
|
|
26067
|
+
// Set the title and message based on the arguments
|
|
26068
|
+
let title = '';
|
|
26069
|
+
let message = '';
|
|
26070
|
+
// Function to format message
|
|
26071
|
+
const formatMessage = input => {
|
|
26072
|
+
if (input && typeof input === 'object') {
|
|
26073
|
+
return JSON.stringify(input, null, 2);
|
|
26074
|
+
} else if (typeof input === 'function') {
|
|
26075
|
+
return input.toString();
|
|
26076
|
+
}
|
|
26077
|
+
return String(input);
|
|
26078
|
+
};
|
|
26079
|
+
// If arg2 exists, use it as the message
|
|
26080
|
+
if (arg2 !== undefined) {
|
|
26081
|
+
title = formatMessage(arg1);
|
|
26082
|
+
message = formatMessage(arg2);
|
|
26083
|
+
} else {
|
|
26084
|
+
title = formatMessage(arg1);
|
|
26085
|
+
message = '';
|
|
26086
|
+
}
|
|
26087
|
+
const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
|
|
26020
26088
|
// Close the existing toast if open, and then immediately show the new one
|
|
26021
26089
|
setToastProps(prev => ({
|
|
26022
26090
|
...prev,
|
|
@@ -26026,7 +26094,7 @@ const Toastify = () => {
|
|
|
26026
26094
|
setToastProps({
|
|
26027
26095
|
isOpen: true,
|
|
26028
26096
|
variant,
|
|
26029
|
-
toastTitle:
|
|
26097
|
+
toastTitle: formattedTitle,
|
|
26030
26098
|
toastMessage: message
|
|
26031
26099
|
});
|
|
26032
26100
|
}, 10);
|
|
@@ -26046,14 +26114,14 @@ const Toastify = () => {
|
|
|
26046
26114
|
};
|
|
26047
26115
|
// Utility to trigger toast messages outside of the Toastify component
|
|
26048
26116
|
const toast = {
|
|
26049
|
-
success:
|
|
26050
|
-
error:
|
|
26051
|
-
warning:
|
|
26052
|
-
info:
|
|
26117
|
+
success: (arg1, arg2) => openToast('success', arg1, arg2),
|
|
26118
|
+
error: (arg1, arg2) => openToast('danger', arg1, arg2),
|
|
26119
|
+
warning: (arg1, arg2) => openToast('warning', arg1, arg2),
|
|
26120
|
+
info: (arg1, arg2) => openToast('info', arg1, arg2)
|
|
26053
26121
|
};
|
|
26054
26122
|
|
|
26055
|
-
var css_248z$
|
|
26056
|
-
styleInject(css_248z$
|
|
26123
|
+
var css_248z$5 = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n padding: 4px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n border: 1px solid var(--label-edit-text-label-color);\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n flex: 2;\n border: 1px solid var(--label-edit-text-label-color);\n border-radius: 4px 0 0 4px;\n border-right: none;\n border-width: thin;\n padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n border-radius: 0 4px 4px 0;\n flex: 1;\n height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n margin: 0;\n color: var(--label-edit-error-text);\n}";
|
|
26124
|
+
styleInject(css_248z$5);
|
|
26057
26125
|
|
|
26058
26126
|
const getErrorMessage = (inputValue, text, customError) => {
|
|
26059
26127
|
if (inputValue === text) {
|
|
@@ -26224,53 +26292,6 @@ const LabelEditTextField = ({
|
|
|
26224
26292
|
});
|
|
26225
26293
|
};
|
|
26226
26294
|
|
|
26227
|
-
const ExcelSheetBar = ({
|
|
26228
|
-
fileDetails,
|
|
26229
|
-
handleSheetChange,
|
|
26230
|
-
selectedSheet
|
|
26231
|
-
}) => {
|
|
26232
|
-
const [activeTabId, setActiveTabId] = useState('0');
|
|
26233
|
-
const tabsData = fileDetails.sheetNames.map((name, index) => ({
|
|
26234
|
-
label: name,
|
|
26235
|
-
components: jsx("div", {
|
|
26236
|
-
className: `tab-request ${name === selectedSheet.name ? 'active font-bold' : ''}`,
|
|
26237
|
-
onClick: () => handleSheetChange(name, index),
|
|
26238
|
-
children: name
|
|
26239
|
-
}, name),
|
|
26240
|
-
id: index.toString()
|
|
26241
|
-
}));
|
|
26242
|
-
return jsx(Fragment, {
|
|
26243
|
-
children: jsx(Container, {
|
|
26244
|
-
fluid: true,
|
|
26245
|
-
children: jsxs(Row$1, {
|
|
26246
|
-
children: [jsx(Col, {
|
|
26247
|
-
size: 0,
|
|
26248
|
-
children: jsx(Tooltip, {
|
|
26249
|
-
title: "Add Sheet",
|
|
26250
|
-
placement: "top",
|
|
26251
|
-
children: jsx(Icon, {
|
|
26252
|
-
className: "cursor-pointer ml-1",
|
|
26253
|
-
hoverEffect: true,
|
|
26254
|
-
name: "plus_icon",
|
|
26255
|
-
height: 20,
|
|
26256
|
-
width: 20
|
|
26257
|
-
})
|
|
26258
|
-
})
|
|
26259
|
-
}), jsx(Col, {
|
|
26260
|
-
size: 11,
|
|
26261
|
-
children: jsx(Tabs, {
|
|
26262
|
-
tabsData: tabsData,
|
|
26263
|
-
activeTabId: activeTabId,
|
|
26264
|
-
onTabClick: tabId => {
|
|
26265
|
-
setActiveTabId(tabId);
|
|
26266
|
-
}
|
|
26267
|
-
})
|
|
26268
|
-
})]
|
|
26269
|
-
})
|
|
26270
|
-
})
|
|
26271
|
-
});
|
|
26272
|
-
};
|
|
26273
|
-
|
|
26274
26295
|
const SET_DATA = 'SET_DATA';
|
|
26275
26296
|
const SET_CREATE_FORMULA_PARSER = 'SET_CREATE_FORMULA_PARSER';
|
|
26276
26297
|
const SELECT_ENTIRE_ROW = 'SELECT_ENTIRE_ROW';
|
|
@@ -26288,14 +26309,17 @@ const EDIT = 'EDIT';
|
|
|
26288
26309
|
const VIEW = 'VIEW';
|
|
26289
26310
|
const CLEAR = 'CLEAR';
|
|
26290
26311
|
const BLUR = 'BLUR';
|
|
26291
|
-
const KEY_PRESS = 'KEY_PRESS';
|
|
26292
26312
|
const KEY_DOWN = 'KEY_DOWN';
|
|
26293
26313
|
const DRAG_START = 'DRAG_START';
|
|
26294
26314
|
const DRAG_END = 'DRAG_END';
|
|
26295
26315
|
const COMMIT = 'COMMIT';
|
|
26296
26316
|
const BOLD = 'BOLD';
|
|
26297
26317
|
const ITALIC = 'ITALIC';
|
|
26298
|
-
const
|
|
26318
|
+
const UNDERLINE_TYPE = 'UNDERLINE_TYPE';
|
|
26319
|
+
const FONT_FAMILY = 'FONT_FAMILY';
|
|
26320
|
+
const FONT_SIZE = 'FONT_SIZE';
|
|
26321
|
+
const TEXT_ALIGN = 'TEXT_ALIGN';
|
|
26322
|
+
const BORDER_TYPE = 'BORDER_TYPE';
|
|
26299
26323
|
const COLOR = 'COLOR';
|
|
26300
26324
|
const BACKGROUND_COLOR = 'BACKGROUND_COLOR';
|
|
26301
26325
|
const FORMATE_PAINTER = 'FORMATE_PAINTER';
|
|
@@ -26315,11 +26339,50 @@ function italic(data) {
|
|
|
26315
26339
|
}
|
|
26316
26340
|
};
|
|
26317
26341
|
}
|
|
26318
|
-
function
|
|
26342
|
+
function borderType(data, value, color) {
|
|
26319
26343
|
return {
|
|
26320
|
-
type:
|
|
26344
|
+
type: BORDER_TYPE,
|
|
26321
26345
|
payload: {
|
|
26322
|
-
data
|
|
26346
|
+
data,
|
|
26347
|
+
value,
|
|
26348
|
+
color
|
|
26349
|
+
}
|
|
26350
|
+
};
|
|
26351
|
+
}
|
|
26352
|
+
function underlineType(data, value, active) {
|
|
26353
|
+
return {
|
|
26354
|
+
type: UNDERLINE_TYPE,
|
|
26355
|
+
payload: {
|
|
26356
|
+
data,
|
|
26357
|
+
value,
|
|
26358
|
+
active
|
|
26359
|
+
}
|
|
26360
|
+
};
|
|
26361
|
+
}
|
|
26362
|
+
function fontSize(data, value) {
|
|
26363
|
+
return {
|
|
26364
|
+
type: FONT_SIZE,
|
|
26365
|
+
payload: {
|
|
26366
|
+
data,
|
|
26367
|
+
value
|
|
26368
|
+
}
|
|
26369
|
+
};
|
|
26370
|
+
}
|
|
26371
|
+
function fontFamily(data, value) {
|
|
26372
|
+
return {
|
|
26373
|
+
type: FONT_FAMILY,
|
|
26374
|
+
payload: {
|
|
26375
|
+
data,
|
|
26376
|
+
value
|
|
26377
|
+
}
|
|
26378
|
+
};
|
|
26379
|
+
}
|
|
26380
|
+
function textAlign(data, value) {
|
|
26381
|
+
return {
|
|
26382
|
+
type: TEXT_ALIGN,
|
|
26383
|
+
payload: {
|
|
26384
|
+
data,
|
|
26385
|
+
value
|
|
26323
26386
|
}
|
|
26324
26387
|
};
|
|
26325
26388
|
}
|
|
@@ -26438,14 +26501,6 @@ function paste(data) {
|
|
|
26438
26501
|
}
|
|
26439
26502
|
};
|
|
26440
26503
|
}
|
|
26441
|
-
function keyPress(event) {
|
|
26442
|
-
return {
|
|
26443
|
-
type: KEY_PRESS,
|
|
26444
|
-
payload: {
|
|
26445
|
-
event
|
|
26446
|
-
}
|
|
26447
|
-
};
|
|
26448
|
-
}
|
|
26449
26504
|
function keyDown(event) {
|
|
26450
26505
|
return {
|
|
26451
26506
|
type: KEY_DOWN,
|
|
@@ -48364,435 +48419,10 @@ function getFormulaComputedValue(value, point, formulaParser) {
|
|
|
48364
48419
|
}
|
|
48365
48420
|
}
|
|
48366
48421
|
|
|
48367
|
-
const INITIAL_STATE = {
|
|
48368
|
-
active: null,
|
|
48369
|
-
mode: 'view',
|
|
48370
|
-
rowDimensions: {},
|
|
48371
|
-
columnDimensions: {},
|
|
48372
|
-
lastChanged: null,
|
|
48373
|
-
hasPasted: false,
|
|
48374
|
-
cut: false,
|
|
48375
|
-
dragging: false,
|
|
48376
|
-
model: new Model(createFormulaParser, []),
|
|
48377
|
-
selected: new EmptySelection(),
|
|
48378
|
-
copied: null,
|
|
48379
|
-
lastCommit: null
|
|
48380
|
-
};
|
|
48381
|
-
function reducer(state, action) {
|
|
48382
|
-
switch (action.type) {
|
|
48383
|
-
case BOLD:
|
|
48384
|
-
{
|
|
48385
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48386
|
-
const updatedData = applyBoldToCells(state.model.data, selectedRange);
|
|
48387
|
-
return {
|
|
48388
|
-
...state,
|
|
48389
|
-
model: new Model(state.model.createFormulaParser, updatedData)
|
|
48390
|
-
};
|
|
48391
|
-
}
|
|
48392
|
-
case ITALIC:
|
|
48393
|
-
{
|
|
48394
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48395
|
-
const updatedData = applyItalicToCells(state.model.data, selectedRange);
|
|
48396
|
-
return {
|
|
48397
|
-
...state,
|
|
48398
|
-
model: new Model(state.model.createFormulaParser, updatedData)
|
|
48399
|
-
};
|
|
48400
|
-
}
|
|
48401
|
-
case UNDERLINE:
|
|
48402
|
-
{
|
|
48403
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48404
|
-
const updatedData = applyUnderlineToCells(state.model.data, selectedRange);
|
|
48405
|
-
return {
|
|
48406
|
-
...state,
|
|
48407
|
-
model: new Model(state.model.createFormulaParser, updatedData)
|
|
48408
|
-
};
|
|
48409
|
-
}
|
|
48410
|
-
case COLOR:
|
|
48411
|
-
{
|
|
48412
|
-
const {
|
|
48413
|
-
value
|
|
48414
|
-
} = action.payload;
|
|
48415
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48416
|
-
const updatedData = applyColorToCells(state.model.data, selectedRange, value);
|
|
48417
|
-
return {
|
|
48418
|
-
...state,
|
|
48419
|
-
model: new Model(state.model.createFormulaParser, updatedData)
|
|
48420
|
-
};
|
|
48421
|
-
}
|
|
48422
|
-
case BACKGROUND_COLOR:
|
|
48423
|
-
{
|
|
48424
|
-
const {
|
|
48425
|
-
value
|
|
48426
|
-
} = action.payload;
|
|
48427
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48428
|
-
const updatedData = applyBackgroundColorToCells(state.model.data, selectedRange, value);
|
|
48429
|
-
return {
|
|
48430
|
-
...state,
|
|
48431
|
-
model: new Model(state.model.createFormulaParser, updatedData)
|
|
48432
|
-
};
|
|
48433
|
-
}
|
|
48434
|
-
case FORMATE_PAINTER:
|
|
48435
|
-
{
|
|
48436
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48437
|
-
const updatedData = applyUnderlineToCells(state.model.data, selectedRange);
|
|
48438
|
-
return {
|
|
48439
|
-
...state,
|
|
48440
|
-
model: new Model(state.model.createFormulaParser, updatedData)
|
|
48441
|
-
};
|
|
48442
|
-
}
|
|
48443
|
-
case SET_DATA:
|
|
48444
|
-
{
|
|
48445
|
-
const {
|
|
48446
|
-
data
|
|
48447
|
-
} = action.payload;
|
|
48448
|
-
const nextActive = state.active && has$1(state.active, data) ? state.active : null;
|
|
48449
|
-
const nextSelected = state.selected.normalizeTo(data);
|
|
48450
|
-
return {
|
|
48451
|
-
...state,
|
|
48452
|
-
model: new Model(state.model.createFormulaParser, data),
|
|
48453
|
-
active: nextActive,
|
|
48454
|
-
selected: nextSelected
|
|
48455
|
-
};
|
|
48456
|
-
}
|
|
48457
|
-
case SET_CREATE_FORMULA_PARSER:
|
|
48458
|
-
{
|
|
48459
|
-
const {
|
|
48460
|
-
createFormulaParser
|
|
48461
|
-
} = action.payload;
|
|
48462
|
-
return {
|
|
48463
|
-
...state,
|
|
48464
|
-
model: new Model(createFormulaParser, state.model.data)
|
|
48465
|
-
};
|
|
48466
|
-
}
|
|
48467
|
-
case SELECT_ENTIRE_ROW:
|
|
48468
|
-
{
|
|
48469
|
-
const {
|
|
48470
|
-
row,
|
|
48471
|
-
extend
|
|
48472
|
-
} = action.payload;
|
|
48473
|
-
const {
|
|
48474
|
-
active
|
|
48475
|
-
} = state;
|
|
48476
|
-
return {
|
|
48477
|
-
...state,
|
|
48478
|
-
selected: extend && active ? new EntireRowsSelection(active.row, row) : new EntireRowsSelection(row, row),
|
|
48479
|
-
active: extend && active ? active : {
|
|
48480
|
-
...ORIGIN,
|
|
48481
|
-
row
|
|
48482
|
-
},
|
|
48483
|
-
mode: 'view'
|
|
48484
|
-
};
|
|
48485
|
-
}
|
|
48486
|
-
case SELECT_ENTIRE_COLUMN:
|
|
48487
|
-
{
|
|
48488
|
-
const {
|
|
48489
|
-
column,
|
|
48490
|
-
extend
|
|
48491
|
-
} = action.payload;
|
|
48492
|
-
const {
|
|
48493
|
-
active
|
|
48494
|
-
} = state;
|
|
48495
|
-
return {
|
|
48496
|
-
...state,
|
|
48497
|
-
selected: extend && active ? new EntireColumnsSelection(active.column, column) : new EntireColumnsSelection(column, column),
|
|
48498
|
-
active: extend && active ? active : {
|
|
48499
|
-
...ORIGIN,
|
|
48500
|
-
column
|
|
48501
|
-
},
|
|
48502
|
-
mode: 'view'
|
|
48503
|
-
};
|
|
48504
|
-
}
|
|
48505
|
-
case SELECT_ENTIRE_WORKSHEET:
|
|
48506
|
-
{
|
|
48507
|
-
return {
|
|
48508
|
-
...state,
|
|
48509
|
-
selected: new EntireWorksheetSelection(),
|
|
48510
|
-
active: ORIGIN,
|
|
48511
|
-
mode: 'view'
|
|
48512
|
-
};
|
|
48513
|
-
}
|
|
48514
|
-
case SET_SELECTION:
|
|
48515
|
-
{
|
|
48516
|
-
const {
|
|
48517
|
-
selection
|
|
48518
|
-
} = action.payload;
|
|
48519
|
-
const range = selection.toRange(state.model.data);
|
|
48520
|
-
const active = state.active && selection.has(state.model.data, state.active) ? state.active : range?.start;
|
|
48521
|
-
return {
|
|
48522
|
-
...state,
|
|
48523
|
-
selected: selection,
|
|
48524
|
-
active: active || null,
|
|
48525
|
-
mode: 'view'
|
|
48526
|
-
};
|
|
48527
|
-
}
|
|
48528
|
-
case SELECT:
|
|
48529
|
-
{
|
|
48530
|
-
const {
|
|
48531
|
-
point
|
|
48532
|
-
} = action.payload;
|
|
48533
|
-
if (state.active && !isActive(state.active, point)) {
|
|
48534
|
-
return {
|
|
48535
|
-
...state,
|
|
48536
|
-
selected: new RangeSelection(new PointRange(point, state.active)),
|
|
48537
|
-
mode: 'view'
|
|
48538
|
-
};
|
|
48539
|
-
}
|
|
48540
|
-
return state;
|
|
48541
|
-
}
|
|
48542
|
-
case ACTIVATE:
|
|
48543
|
-
{
|
|
48544
|
-
const {
|
|
48545
|
-
point
|
|
48546
|
-
} = action.payload;
|
|
48547
|
-
return {
|
|
48548
|
-
...state,
|
|
48549
|
-
selected: new RangeSelection(new PointRange(point, point)),
|
|
48550
|
-
active: point,
|
|
48551
|
-
mode: isActive(state.active, point) ? 'edit' : 'view'
|
|
48552
|
-
};
|
|
48553
|
-
}
|
|
48554
|
-
case SET_CELL_DATA:
|
|
48555
|
-
{
|
|
48556
|
-
const {
|
|
48557
|
-
active,
|
|
48558
|
-
data: cellData
|
|
48559
|
-
} = action.payload;
|
|
48560
|
-
if (isActiveReadOnly(state)) {
|
|
48561
|
-
return state;
|
|
48562
|
-
}
|
|
48563
|
-
return {
|
|
48564
|
-
...state,
|
|
48565
|
-
model: updateCellValue(state.model, active, cellData),
|
|
48566
|
-
lastChanged: active
|
|
48567
|
-
};
|
|
48568
|
-
}
|
|
48569
|
-
case SET_CELL_DIMENSIONS:
|
|
48570
|
-
{
|
|
48571
|
-
const {
|
|
48572
|
-
point,
|
|
48573
|
-
dimensions
|
|
48574
|
-
} = action.payload;
|
|
48575
|
-
const prevRowDimensions = state.rowDimensions[point.row];
|
|
48576
|
-
const prevColumnDimensions = state.columnDimensions[point.column];
|
|
48577
|
-
if (prevRowDimensions && prevColumnDimensions && prevRowDimensions.top === dimensions.top && prevRowDimensions.height === dimensions.height && prevColumnDimensions.left === dimensions.left && prevColumnDimensions.width === dimensions.width) {
|
|
48578
|
-
return state;
|
|
48579
|
-
}
|
|
48580
|
-
return {
|
|
48581
|
-
...state,
|
|
48582
|
-
rowDimensions: {
|
|
48583
|
-
...state.rowDimensions,
|
|
48584
|
-
[point.row]: {
|
|
48585
|
-
top: dimensions.top,
|
|
48586
|
-
height: dimensions.height
|
|
48587
|
-
}
|
|
48588
|
-
},
|
|
48589
|
-
columnDimensions: {
|
|
48590
|
-
...state.columnDimensions,
|
|
48591
|
-
[point.column]: {
|
|
48592
|
-
left: dimensions.left,
|
|
48593
|
-
width: dimensions.width
|
|
48594
|
-
}
|
|
48595
|
-
}
|
|
48596
|
-
};
|
|
48597
|
-
}
|
|
48598
|
-
case COPY:
|
|
48599
|
-
case CUT:
|
|
48600
|
-
{
|
|
48601
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48602
|
-
return {
|
|
48603
|
-
...state,
|
|
48604
|
-
copied: selectedRange,
|
|
48605
|
-
cut: action.type === CUT,
|
|
48606
|
-
hasPasted: false
|
|
48607
|
-
};
|
|
48608
|
-
}
|
|
48609
|
-
case PASTE:
|
|
48610
|
-
{
|
|
48611
|
-
const {
|
|
48612
|
-
data: text
|
|
48613
|
-
} = action.payload;
|
|
48614
|
-
const {
|
|
48615
|
-
active
|
|
48616
|
-
} = state;
|
|
48617
|
-
if (!active) {
|
|
48618
|
-
return state;
|
|
48619
|
-
}
|
|
48620
|
-
const copied = split(text, value => ({
|
|
48621
|
-
value
|
|
48622
|
-
}));
|
|
48623
|
-
const copiedSize = getSize(copied);
|
|
48624
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48625
|
-
if (selectedRange && copiedSize.rows === 1 && copiedSize.columns === 1) {
|
|
48626
|
-
const cell = get({
|
|
48627
|
-
row: 0,
|
|
48628
|
-
column: 0
|
|
48629
|
-
}, copied);
|
|
48630
|
-
let newData = state.cut && state.copied ? unset(state.copied.start, state.model.data) : state.model.data;
|
|
48631
|
-
const commit = [];
|
|
48632
|
-
for (const point of selectedRange || []) {
|
|
48633
|
-
const currentCell = get(point, state.model.data);
|
|
48634
|
-
commit.push({
|
|
48635
|
-
prevCell: currentCell || null,
|
|
48636
|
-
nextCell: cell || null
|
|
48637
|
-
});
|
|
48638
|
-
newData = set(point, cell, newData);
|
|
48639
|
-
}
|
|
48640
|
-
return {
|
|
48641
|
-
...state,
|
|
48642
|
-
model: new Model(createFormulaParser, newData),
|
|
48643
|
-
copied: null,
|
|
48644
|
-
cut: false,
|
|
48645
|
-
hasPasted: true,
|
|
48646
|
-
mode: 'view',
|
|
48647
|
-
lastCommit: commit
|
|
48648
|
-
};
|
|
48649
|
-
}
|
|
48650
|
-
const requiredSize = {
|
|
48651
|
-
rows: active.row + copiedSize.rows,
|
|
48652
|
-
columns: active.column + copiedSize.columns
|
|
48653
|
-
};
|
|
48654
|
-
const paddedData = pad(state.model.data, requiredSize);
|
|
48655
|
-
let acc = {
|
|
48656
|
-
data: paddedData,
|
|
48657
|
-
commit: []
|
|
48658
|
-
};
|
|
48659
|
-
for (const [point, cell] of entries(copied)) {
|
|
48660
|
-
let commit = acc.commit || [];
|
|
48661
|
-
const nextPoint = {
|
|
48662
|
-
row: point.row + active.row,
|
|
48663
|
-
column: point.column + active.column
|
|
48664
|
-
};
|
|
48665
|
-
let nextData = acc.data;
|
|
48666
|
-
if (state.cut) {
|
|
48667
|
-
if (state.copied) {
|
|
48668
|
-
const prevPoint = {
|
|
48669
|
-
row: point.row + state.copied.start.row,
|
|
48670
|
-
column: point.column + state.copied.start.column
|
|
48671
|
-
};
|
|
48672
|
-
nextData = unset(prevPoint, acc.data);
|
|
48673
|
-
}
|
|
48674
|
-
commit = [...commit, {
|
|
48675
|
-
prevCell: cell || null,
|
|
48676
|
-
nextCell: null
|
|
48677
|
-
}];
|
|
48678
|
-
}
|
|
48679
|
-
if (!has$1(nextPoint, paddedData)) {
|
|
48680
|
-
acc = {
|
|
48681
|
-
data: nextData,
|
|
48682
|
-
commit
|
|
48683
|
-
};
|
|
48684
|
-
}
|
|
48685
|
-
const currentCell = get(nextPoint, nextData) || null;
|
|
48686
|
-
commit = [...commit, {
|
|
48687
|
-
prevCell: currentCell,
|
|
48688
|
-
nextCell: cell || null
|
|
48689
|
-
}];
|
|
48690
|
-
acc.data = set(nextPoint, {
|
|
48691
|
-
value: undefined,
|
|
48692
|
-
...currentCell,
|
|
48693
|
-
...cell
|
|
48694
|
-
}, nextData);
|
|
48695
|
-
acc.commit = commit;
|
|
48696
|
-
}
|
|
48697
|
-
return {
|
|
48698
|
-
...state,
|
|
48699
|
-
model: new Model(createFormulaParser, acc.data),
|
|
48700
|
-
selected: new RangeSelection(new PointRange(active, {
|
|
48701
|
-
row: active.row + copiedSize.rows - 1,
|
|
48702
|
-
column: active.column + copiedSize.columns - 1
|
|
48703
|
-
})),
|
|
48704
|
-
copied: null,
|
|
48705
|
-
cut: false,
|
|
48706
|
-
hasPasted: true,
|
|
48707
|
-
mode: 'view',
|
|
48708
|
-
lastCommit: acc.commit
|
|
48709
|
-
};
|
|
48710
|
-
}
|
|
48711
|
-
case EDIT:
|
|
48712
|
-
{
|
|
48713
|
-
return edit(state);
|
|
48714
|
-
}
|
|
48715
|
-
case VIEW:
|
|
48716
|
-
{
|
|
48717
|
-
return view(state);
|
|
48718
|
-
}
|
|
48719
|
-
case CLEAR:
|
|
48720
|
-
{
|
|
48721
|
-
return clear(state);
|
|
48722
|
-
}
|
|
48723
|
-
case BLUR:
|
|
48724
|
-
{
|
|
48725
|
-
return blur(state);
|
|
48726
|
-
}
|
|
48727
|
-
case KEY_PRESS:
|
|
48728
|
-
{
|
|
48729
|
-
const {
|
|
48730
|
-
event
|
|
48731
|
-
} = action.payload;
|
|
48732
|
-
if (isActiveReadOnly(state) || event.metaKey) {
|
|
48733
|
-
return state;
|
|
48734
|
-
}
|
|
48735
|
-
if (state.mode === 'view' && state.active) {
|
|
48736
|
-
const selectedRange = state.selected.toRange(state.model.data);
|
|
48737
|
-
if (selectedRange?.size() === 1) {
|
|
48738
|
-
return edit(clear(state));
|
|
48739
|
-
}
|
|
48740
|
-
return edit(state);
|
|
48741
|
-
}
|
|
48742
|
-
return state;
|
|
48743
|
-
}
|
|
48744
|
-
case KEY_DOWN:
|
|
48745
|
-
{
|
|
48746
|
-
const {
|
|
48747
|
-
event
|
|
48748
|
-
} = action.payload;
|
|
48749
|
-
const handler = getKeyDownHandler(state, event);
|
|
48750
|
-
if (handler) {
|
|
48751
|
-
return {
|
|
48752
|
-
...state,
|
|
48753
|
-
...handler(state, event)
|
|
48754
|
-
};
|
|
48755
|
-
}
|
|
48756
|
-
return state;
|
|
48757
|
-
}
|
|
48758
|
-
case DRAG_START:
|
|
48759
|
-
{
|
|
48760
|
-
return {
|
|
48761
|
-
...state,
|
|
48762
|
-
dragging: true
|
|
48763
|
-
};
|
|
48764
|
-
}
|
|
48765
|
-
case DRAG_END:
|
|
48766
|
-
{
|
|
48767
|
-
return {
|
|
48768
|
-
...state,
|
|
48769
|
-
dragging: false
|
|
48770
|
-
};
|
|
48771
|
-
}
|
|
48772
|
-
case COMMIT:
|
|
48773
|
-
{
|
|
48774
|
-
const {
|
|
48775
|
-
changes
|
|
48776
|
-
} = action.payload;
|
|
48777
|
-
return {
|
|
48778
|
-
...state,
|
|
48779
|
-
...commit(changes)
|
|
48780
|
-
};
|
|
48781
|
-
}
|
|
48782
|
-
default:
|
|
48783
|
-
throw new Error('Unknown action');
|
|
48784
|
-
}
|
|
48785
|
-
}
|
|
48786
|
-
// const reducer = createReducer(INITIAL_STATE, (builder) => {
|
|
48787
|
-
// builder.addMatcher(
|
|
48788
|
-
// (action) =>
|
|
48789
|
-
// action.type === Actions.copy.type || action.type === Actions.cut.type,
|
|
48790
|
-
// (state, action) => {
|
|
48791
|
-
// }
|
|
48792
|
-
// );
|
|
48793
|
-
// });
|
|
48794
|
-
// // Shared reducers
|
|
48795
48422
|
function applyBoldToCells(currentData, selectedRange) {
|
|
48423
|
+
if (!selectedRange) {
|
|
48424
|
+
return currentData;
|
|
48425
|
+
}
|
|
48796
48426
|
const {
|
|
48797
48427
|
start,
|
|
48798
48428
|
end
|
|
@@ -48823,6 +48453,9 @@ function applyBoldToCells(currentData, selectedRange) {
|
|
|
48823
48453
|
return updatedData;
|
|
48824
48454
|
}
|
|
48825
48455
|
function applyItalicToCells(currentData, selectedRange) {
|
|
48456
|
+
if (!selectedRange) {
|
|
48457
|
+
return currentData;
|
|
48458
|
+
}
|
|
48826
48459
|
const {
|
|
48827
48460
|
start,
|
|
48828
48461
|
end
|
|
@@ -48852,7 +48485,10 @@ function applyItalicToCells(currentData, selectedRange) {
|
|
|
48852
48485
|
}
|
|
48853
48486
|
return updatedData;
|
|
48854
48487
|
}
|
|
48855
|
-
function
|
|
48488
|
+
function applyFontFamily(currentData, selectedRange, value) {
|
|
48489
|
+
if (!selectedRange) {
|
|
48490
|
+
return currentData;
|
|
48491
|
+
}
|
|
48856
48492
|
const {
|
|
48857
48493
|
start,
|
|
48858
48494
|
end
|
|
@@ -48867,11 +48503,11 @@ function applyUnderlineToCells(currentData, selectedRange) {
|
|
|
48867
48503
|
if (!currentCell) {
|
|
48868
48504
|
continue;
|
|
48869
48505
|
}
|
|
48870
|
-
|
|
48506
|
+
let updatedCell = {
|
|
48871
48507
|
...currentCell,
|
|
48872
48508
|
style: {
|
|
48873
48509
|
...currentCell.style,
|
|
48874
|
-
|
|
48510
|
+
fontFamily: value
|
|
48875
48511
|
}
|
|
48876
48512
|
};
|
|
48877
48513
|
updatedData = set({
|
|
@@ -48882,13 +48518,193 @@ function applyUnderlineToCells(currentData, selectedRange) {
|
|
|
48882
48518
|
}
|
|
48883
48519
|
return updatedData;
|
|
48884
48520
|
}
|
|
48521
|
+
function applyFontSize(currentData, selectedRange, value) {
|
|
48522
|
+
const conversion = Number(value);
|
|
48523
|
+
if (isNaN(conversion)) {
|
|
48524
|
+
return currentData;
|
|
48525
|
+
}
|
|
48526
|
+
const fontSizeInPx = convertPtToPx(conversion);
|
|
48527
|
+
if (!selectedRange) {
|
|
48528
|
+
return currentData;
|
|
48529
|
+
}
|
|
48530
|
+
const {
|
|
48531
|
+
start,
|
|
48532
|
+
end
|
|
48533
|
+
} = selectedRange;
|
|
48534
|
+
let updatedData = currentData;
|
|
48535
|
+
for (let row = start.row; row <= end.row; row++) {
|
|
48536
|
+
for (let col = start.column; col <= end.column; col++) {
|
|
48537
|
+
const currentCell = get({
|
|
48538
|
+
row,
|
|
48539
|
+
column: col
|
|
48540
|
+
}, updatedData);
|
|
48541
|
+
if (!currentCell) {
|
|
48542
|
+
continue;
|
|
48543
|
+
}
|
|
48544
|
+
let updatedCell = {
|
|
48545
|
+
...currentCell,
|
|
48546
|
+
style: {
|
|
48547
|
+
...currentCell.style,
|
|
48548
|
+
fontSize: fontSizeInPx
|
|
48549
|
+
}
|
|
48550
|
+
};
|
|
48551
|
+
updatedData = set({
|
|
48552
|
+
row,
|
|
48553
|
+
column: col
|
|
48554
|
+
}, updatedCell, updatedData);
|
|
48555
|
+
}
|
|
48556
|
+
}
|
|
48557
|
+
return updatedData;
|
|
48558
|
+
}
|
|
48559
|
+
function applyBorderToCells(currentData, selectedRange, value, color) {
|
|
48560
|
+
if (!selectedRange) {
|
|
48561
|
+
return currentData;
|
|
48562
|
+
}
|
|
48563
|
+
const {
|
|
48564
|
+
start,
|
|
48565
|
+
end
|
|
48566
|
+
} = selectedRange;
|
|
48567
|
+
let updatedData = currentData;
|
|
48568
|
+
for (let row = start.row; row <= end.row; row++) {
|
|
48569
|
+
for (let col = start.column; col <= end.column; col++) {
|
|
48570
|
+
const currentCell = get({
|
|
48571
|
+
row,
|
|
48572
|
+
column: col
|
|
48573
|
+
}, updatedData);
|
|
48574
|
+
if (!currentCell) {
|
|
48575
|
+
continue;
|
|
48576
|
+
}
|
|
48577
|
+
let updatedCell = {
|
|
48578
|
+
...currentCell
|
|
48579
|
+
};
|
|
48580
|
+
switch (value) {
|
|
48581
|
+
case 'border-all-sides':
|
|
48582
|
+
updatedCell.style = {
|
|
48583
|
+
...currentCell.style,
|
|
48584
|
+
border: `2px solid ${color}`
|
|
48585
|
+
};
|
|
48586
|
+
break;
|
|
48587
|
+
case 'border-none':
|
|
48588
|
+
updatedCell.style = {
|
|
48589
|
+
...currentCell.style,
|
|
48590
|
+
border: `1px solid var(--toggle-strip-color)`
|
|
48591
|
+
};
|
|
48592
|
+
break;
|
|
48593
|
+
case 'border-right':
|
|
48594
|
+
updatedCell.style = {
|
|
48595
|
+
...currentCell.style,
|
|
48596
|
+
borderRight: `2px solid ${color}`
|
|
48597
|
+
};
|
|
48598
|
+
break;
|
|
48599
|
+
case 'border-left':
|
|
48600
|
+
updatedCell.style = {
|
|
48601
|
+
...currentCell.style,
|
|
48602
|
+
borderLeft: `2px solid ${color}`
|
|
48603
|
+
};
|
|
48604
|
+
break;
|
|
48605
|
+
case 'border-top':
|
|
48606
|
+
updatedCell.style = {
|
|
48607
|
+
...currentCell.style,
|
|
48608
|
+
borderTop: `2px solid ${color}`
|
|
48609
|
+
};
|
|
48610
|
+
break;
|
|
48611
|
+
case 'border-bottom':
|
|
48612
|
+
updatedCell.style = {
|
|
48613
|
+
...currentCell.style,
|
|
48614
|
+
borderBottom: `2px solid ${color}`
|
|
48615
|
+
};
|
|
48616
|
+
break;
|
|
48617
|
+
}
|
|
48618
|
+
updatedData = set({
|
|
48619
|
+
row,
|
|
48620
|
+
column: col
|
|
48621
|
+
}, updatedCell, updatedData);
|
|
48622
|
+
}
|
|
48623
|
+
}
|
|
48624
|
+
return updatedData;
|
|
48625
|
+
}
|
|
48626
|
+
function applyTextAlign(currentData, selectedRange, value) {
|
|
48627
|
+
if (!selectedRange) {
|
|
48628
|
+
return currentData;
|
|
48629
|
+
}
|
|
48630
|
+
const {
|
|
48631
|
+
start,
|
|
48632
|
+
end
|
|
48633
|
+
} = selectedRange;
|
|
48634
|
+
let updatedData = currentData;
|
|
48635
|
+
for (let row = start.row; row <= end.row; row++) {
|
|
48636
|
+
for (let col = start.column; col <= end.column; col++) {
|
|
48637
|
+
const currentCell = get({
|
|
48638
|
+
row,
|
|
48639
|
+
column: col
|
|
48640
|
+
}, updatedData);
|
|
48641
|
+
if (!currentCell) {
|
|
48642
|
+
continue;
|
|
48643
|
+
}
|
|
48644
|
+
let updatedCell = {
|
|
48645
|
+
...currentCell,
|
|
48646
|
+
style: {
|
|
48647
|
+
...currentCell.style,
|
|
48648
|
+
textAlign: value
|
|
48649
|
+
}
|
|
48650
|
+
};
|
|
48651
|
+
updatedData = set({
|
|
48652
|
+
row,
|
|
48653
|
+
column: col
|
|
48654
|
+
}, updatedCell, updatedData);
|
|
48655
|
+
}
|
|
48656
|
+
}
|
|
48657
|
+
return updatedData;
|
|
48658
|
+
}
|
|
48659
|
+
function applyUnderlineToCells(currentData, selectedRange, value, active) {
|
|
48660
|
+
const {
|
|
48661
|
+
start,
|
|
48662
|
+
end
|
|
48663
|
+
} = selectedRange;
|
|
48664
|
+
let updatedData = currentData;
|
|
48665
|
+
for (let row = start.row; row <= end.row; row++) {
|
|
48666
|
+
for (let col = start.column; col <= end.column; col++) {
|
|
48667
|
+
const currentCell = get({
|
|
48668
|
+
row,
|
|
48669
|
+
column: col
|
|
48670
|
+
}, updatedData);
|
|
48671
|
+
if (!currentCell) {
|
|
48672
|
+
continue;
|
|
48673
|
+
}
|
|
48674
|
+
let updatedCell;
|
|
48675
|
+
if (!active) {
|
|
48676
|
+
updatedCell = {
|
|
48677
|
+
...currentCell,
|
|
48678
|
+
style: {
|
|
48679
|
+
...currentCell.style,
|
|
48680
|
+
textDecoration: 'none',
|
|
48681
|
+
textDecorationStyle: 'none'
|
|
48682
|
+
}
|
|
48683
|
+
};
|
|
48684
|
+
} else {
|
|
48685
|
+
updatedCell = {
|
|
48686
|
+
...currentCell,
|
|
48687
|
+
style: {
|
|
48688
|
+
...currentCell.style,
|
|
48689
|
+
textDecoration: value === 'double_border' ? 'underline' : value,
|
|
48690
|
+
textDecorationStyle: value === 'double_border' ? 'double' : 'none'
|
|
48691
|
+
}
|
|
48692
|
+
};
|
|
48693
|
+
}
|
|
48694
|
+
updatedData = set({
|
|
48695
|
+
row,
|
|
48696
|
+
column: col
|
|
48697
|
+
}, updatedCell, updatedData);
|
|
48698
|
+
}
|
|
48699
|
+
}
|
|
48700
|
+
return updatedData;
|
|
48701
|
+
}
|
|
48885
48702
|
function isValidHexColor(color) {
|
|
48886
48703
|
if (color.length !== 6) {
|
|
48887
48704
|
return false;
|
|
48888
48705
|
}
|
|
48889
48706
|
const hexChars = '0123456789ABCDEFabcdef';
|
|
48890
48707
|
for (let i = 1; i < color.length; i++) {
|
|
48891
|
-
console.log(typeof color[i]);
|
|
48892
48708
|
if (!hexChars.includes(color[i])) {
|
|
48893
48709
|
return false;
|
|
48894
48710
|
}
|
|
@@ -49048,6 +48864,10 @@ const go = (rowDelta, columnDelta) => state => {
|
|
|
49048
48864
|
mode: 'view'
|
|
49049
48865
|
};
|
|
49050
48866
|
};
|
|
48867
|
+
function convertPtToPx(pt) {
|
|
48868
|
+
const px = pt * 1.33;
|
|
48869
|
+
return `${Math.round(px)}px`;
|
|
48870
|
+
}
|
|
49051
48871
|
const keyDownHandlers = {
|
|
49052
48872
|
ArrowUp: go(-1, 0),
|
|
49053
48873
|
ArrowDown: go(+1, 0),
|
|
@@ -49203,6 +49023,469 @@ function modifyEntireColumnsSelection(selection, active, data, edge) {
|
|
|
49203
49023
|
return nextSelection.normalizeTo(data);
|
|
49204
49024
|
}
|
|
49205
49025
|
|
|
49026
|
+
const INITIAL_STATE = {
|
|
49027
|
+
active: null,
|
|
49028
|
+
mode: 'view',
|
|
49029
|
+
rowDimensions: {},
|
|
49030
|
+
columnDimensions: {},
|
|
49031
|
+
lastChanged: null,
|
|
49032
|
+
hasPasted: false,
|
|
49033
|
+
cut: false,
|
|
49034
|
+
dragging: false,
|
|
49035
|
+
model: new Model(createFormulaParser, []),
|
|
49036
|
+
selected: new EmptySelection(),
|
|
49037
|
+
copied: null,
|
|
49038
|
+
lastCommit: null
|
|
49039
|
+
};
|
|
49040
|
+
function reducer(state, action) {
|
|
49041
|
+
switch (action.type) {
|
|
49042
|
+
case BOLD:
|
|
49043
|
+
{
|
|
49044
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49045
|
+
const updatedData = applyBoldToCells(state.model.data, selectedRange);
|
|
49046
|
+
return {
|
|
49047
|
+
...state,
|
|
49048
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49049
|
+
};
|
|
49050
|
+
}
|
|
49051
|
+
case ITALIC:
|
|
49052
|
+
{
|
|
49053
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49054
|
+
const updatedData = applyItalicToCells(state.model.data, selectedRange);
|
|
49055
|
+
return {
|
|
49056
|
+
...state,
|
|
49057
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49058
|
+
};
|
|
49059
|
+
}
|
|
49060
|
+
case BORDER_TYPE:
|
|
49061
|
+
{
|
|
49062
|
+
const {
|
|
49063
|
+
value,
|
|
49064
|
+
color
|
|
49065
|
+
} = action.payload;
|
|
49066
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49067
|
+
const updatedData = applyBorderToCells(state.model.data, selectedRange, value, color);
|
|
49068
|
+
return {
|
|
49069
|
+
...state,
|
|
49070
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49071
|
+
};
|
|
49072
|
+
}
|
|
49073
|
+
case UNDERLINE_TYPE:
|
|
49074
|
+
{
|
|
49075
|
+
const {
|
|
49076
|
+
value,
|
|
49077
|
+
active
|
|
49078
|
+
} = action.payload;
|
|
49079
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49080
|
+
const updatedData = applyUnderlineToCells(state.model.data, selectedRange, value, active);
|
|
49081
|
+
return {
|
|
49082
|
+
...state,
|
|
49083
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49084
|
+
};
|
|
49085
|
+
}
|
|
49086
|
+
case FONT_SIZE:
|
|
49087
|
+
{
|
|
49088
|
+
const {
|
|
49089
|
+
value
|
|
49090
|
+
} = action.payload;
|
|
49091
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49092
|
+
const updatedData = applyFontSize(state.model.data, selectedRange, value);
|
|
49093
|
+
return {
|
|
49094
|
+
...state,
|
|
49095
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49096
|
+
};
|
|
49097
|
+
}
|
|
49098
|
+
case FONT_FAMILY:
|
|
49099
|
+
{
|
|
49100
|
+
const {
|
|
49101
|
+
value
|
|
49102
|
+
} = action.payload;
|
|
49103
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49104
|
+
const updatedData = applyFontFamily(state.model.data, selectedRange, value);
|
|
49105
|
+
return {
|
|
49106
|
+
...state,
|
|
49107
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49108
|
+
};
|
|
49109
|
+
}
|
|
49110
|
+
case TEXT_ALIGN:
|
|
49111
|
+
{
|
|
49112
|
+
const {
|
|
49113
|
+
value
|
|
49114
|
+
} = action.payload;
|
|
49115
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49116
|
+
const updatedData = applyTextAlign(state.model.data, selectedRange, value);
|
|
49117
|
+
return {
|
|
49118
|
+
...state,
|
|
49119
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49120
|
+
};
|
|
49121
|
+
}
|
|
49122
|
+
case COLOR:
|
|
49123
|
+
{
|
|
49124
|
+
const {
|
|
49125
|
+
value
|
|
49126
|
+
} = action.payload;
|
|
49127
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49128
|
+
const updatedData = applyColorToCells(state.model.data, selectedRange, value);
|
|
49129
|
+
return {
|
|
49130
|
+
...state,
|
|
49131
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49132
|
+
};
|
|
49133
|
+
}
|
|
49134
|
+
case BACKGROUND_COLOR:
|
|
49135
|
+
{
|
|
49136
|
+
const {
|
|
49137
|
+
value
|
|
49138
|
+
} = action.payload;
|
|
49139
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49140
|
+
const updatedData = applyBackgroundColorToCells(state.model.data, selectedRange, value);
|
|
49141
|
+
return {
|
|
49142
|
+
...state,
|
|
49143
|
+
model: new Model(state.model.createFormulaParser, updatedData)
|
|
49144
|
+
};
|
|
49145
|
+
}
|
|
49146
|
+
case FORMATE_PAINTER:
|
|
49147
|
+
{
|
|
49148
|
+
return {
|
|
49149
|
+
...state,
|
|
49150
|
+
model: new Model(state.model.createFormulaParser, state.model.data)
|
|
49151
|
+
};
|
|
49152
|
+
}
|
|
49153
|
+
case SET_DATA:
|
|
49154
|
+
{
|
|
49155
|
+
const {
|
|
49156
|
+
data
|
|
49157
|
+
} = action.payload;
|
|
49158
|
+
const nextActive = state.active && has$1(state.active, data) ? state.active : null;
|
|
49159
|
+
const nextSelected = state.selected.normalizeTo(data);
|
|
49160
|
+
return {
|
|
49161
|
+
...state,
|
|
49162
|
+
model: new Model(state.model.createFormulaParser, data),
|
|
49163
|
+
active: nextActive,
|
|
49164
|
+
selected: nextSelected
|
|
49165
|
+
};
|
|
49166
|
+
}
|
|
49167
|
+
case SET_CREATE_FORMULA_PARSER:
|
|
49168
|
+
{
|
|
49169
|
+
const {
|
|
49170
|
+
createFormulaParser
|
|
49171
|
+
} = action.payload;
|
|
49172
|
+
return {
|
|
49173
|
+
...state,
|
|
49174
|
+
model: new Model(createFormulaParser, state.model.data)
|
|
49175
|
+
};
|
|
49176
|
+
}
|
|
49177
|
+
case SELECT_ENTIRE_ROW:
|
|
49178
|
+
{
|
|
49179
|
+
const {
|
|
49180
|
+
row,
|
|
49181
|
+
extend
|
|
49182
|
+
} = action.payload;
|
|
49183
|
+
const {
|
|
49184
|
+
active
|
|
49185
|
+
} = state;
|
|
49186
|
+
return {
|
|
49187
|
+
...state,
|
|
49188
|
+
selected: extend && active ? new EntireRowsSelection(active.row, row) : new EntireRowsSelection(row, row),
|
|
49189
|
+
active: extend && active ? active : {
|
|
49190
|
+
...ORIGIN,
|
|
49191
|
+
row
|
|
49192
|
+
},
|
|
49193
|
+
mode: 'view'
|
|
49194
|
+
};
|
|
49195
|
+
}
|
|
49196
|
+
case SELECT_ENTIRE_COLUMN:
|
|
49197
|
+
{
|
|
49198
|
+
const {
|
|
49199
|
+
column,
|
|
49200
|
+
extend
|
|
49201
|
+
} = action.payload;
|
|
49202
|
+
const {
|
|
49203
|
+
active
|
|
49204
|
+
} = state;
|
|
49205
|
+
return {
|
|
49206
|
+
...state,
|
|
49207
|
+
selected: extend && active ? new EntireColumnsSelection(active.column, column) : new EntireColumnsSelection(column, column),
|
|
49208
|
+
active: extend && active ? active : {
|
|
49209
|
+
...ORIGIN,
|
|
49210
|
+
column
|
|
49211
|
+
},
|
|
49212
|
+
mode: 'view'
|
|
49213
|
+
};
|
|
49214
|
+
}
|
|
49215
|
+
case SELECT_ENTIRE_WORKSHEET:
|
|
49216
|
+
{
|
|
49217
|
+
return {
|
|
49218
|
+
...state,
|
|
49219
|
+
selected: new EntireWorksheetSelection(),
|
|
49220
|
+
active: ORIGIN,
|
|
49221
|
+
mode: 'view'
|
|
49222
|
+
};
|
|
49223
|
+
}
|
|
49224
|
+
case SET_SELECTION:
|
|
49225
|
+
{
|
|
49226
|
+
const {
|
|
49227
|
+
selection
|
|
49228
|
+
} = action.payload;
|
|
49229
|
+
const range = selection.toRange(state.model.data);
|
|
49230
|
+
const active = state.active && selection.has(state.model.data, state.active) ? state.active : range?.start;
|
|
49231
|
+
return {
|
|
49232
|
+
...state,
|
|
49233
|
+
selected: selection,
|
|
49234
|
+
active: active || null,
|
|
49235
|
+
mode: 'view'
|
|
49236
|
+
};
|
|
49237
|
+
}
|
|
49238
|
+
case SELECT:
|
|
49239
|
+
{
|
|
49240
|
+
const {
|
|
49241
|
+
point
|
|
49242
|
+
} = action.payload;
|
|
49243
|
+
if (state.active && !isActive(state.active, point)) {
|
|
49244
|
+
return {
|
|
49245
|
+
...state,
|
|
49246
|
+
selected: new RangeSelection(new PointRange(point, state.active)),
|
|
49247
|
+
mode: 'view'
|
|
49248
|
+
};
|
|
49249
|
+
}
|
|
49250
|
+
return state;
|
|
49251
|
+
}
|
|
49252
|
+
case ACTIVATE:
|
|
49253
|
+
{
|
|
49254
|
+
const {
|
|
49255
|
+
point
|
|
49256
|
+
} = action.payload;
|
|
49257
|
+
return {
|
|
49258
|
+
...state,
|
|
49259
|
+
selected: new RangeSelection(new PointRange(point, point)),
|
|
49260
|
+
active: point,
|
|
49261
|
+
mode: isActive(state.active, point) ? 'edit' : 'view'
|
|
49262
|
+
};
|
|
49263
|
+
}
|
|
49264
|
+
case SET_CELL_DATA:
|
|
49265
|
+
{
|
|
49266
|
+
const {
|
|
49267
|
+
active,
|
|
49268
|
+
data: cellData
|
|
49269
|
+
} = action.payload;
|
|
49270
|
+
if (isActiveReadOnly(state)) {
|
|
49271
|
+
return state;
|
|
49272
|
+
}
|
|
49273
|
+
return {
|
|
49274
|
+
...state,
|
|
49275
|
+
model: updateCellValue(state.model, active, cellData),
|
|
49276
|
+
lastChanged: active
|
|
49277
|
+
};
|
|
49278
|
+
}
|
|
49279
|
+
case SET_CELL_DIMENSIONS:
|
|
49280
|
+
{
|
|
49281
|
+
const {
|
|
49282
|
+
point,
|
|
49283
|
+
dimensions
|
|
49284
|
+
} = action.payload;
|
|
49285
|
+
const prevRowDimensions = state.rowDimensions[point.row];
|
|
49286
|
+
const prevColumnDimensions = state.columnDimensions[point.column];
|
|
49287
|
+
if (prevRowDimensions && prevColumnDimensions && prevRowDimensions.top === dimensions.top && prevRowDimensions.height === dimensions.height && prevColumnDimensions.left === dimensions.left && prevColumnDimensions.width === dimensions.width) {
|
|
49288
|
+
return state;
|
|
49289
|
+
}
|
|
49290
|
+
return {
|
|
49291
|
+
...state,
|
|
49292
|
+
rowDimensions: {
|
|
49293
|
+
...state.rowDimensions,
|
|
49294
|
+
[point.row]: {
|
|
49295
|
+
top: dimensions.top,
|
|
49296
|
+
height: dimensions.height
|
|
49297
|
+
}
|
|
49298
|
+
},
|
|
49299
|
+
columnDimensions: {
|
|
49300
|
+
...state.columnDimensions,
|
|
49301
|
+
[point.column]: {
|
|
49302
|
+
left: dimensions.left,
|
|
49303
|
+
width: dimensions.width
|
|
49304
|
+
}
|
|
49305
|
+
}
|
|
49306
|
+
};
|
|
49307
|
+
}
|
|
49308
|
+
case COPY:
|
|
49309
|
+
case CUT:
|
|
49310
|
+
{
|
|
49311
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49312
|
+
return {
|
|
49313
|
+
...state,
|
|
49314
|
+
copied: selectedRange,
|
|
49315
|
+
cut: action.type === CUT,
|
|
49316
|
+
hasPasted: false
|
|
49317
|
+
};
|
|
49318
|
+
}
|
|
49319
|
+
case PASTE:
|
|
49320
|
+
{
|
|
49321
|
+
const {
|
|
49322
|
+
data: text
|
|
49323
|
+
} = action.payload;
|
|
49324
|
+
const {
|
|
49325
|
+
active
|
|
49326
|
+
} = state;
|
|
49327
|
+
if (!active) {
|
|
49328
|
+
return state;
|
|
49329
|
+
}
|
|
49330
|
+
const copied = split(text, value => ({
|
|
49331
|
+
value
|
|
49332
|
+
}));
|
|
49333
|
+
const copiedSize = getSize(copied);
|
|
49334
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
|
49335
|
+
if (selectedRange && copiedSize.rows === 1 && copiedSize.columns === 1) {
|
|
49336
|
+
const cell = get({
|
|
49337
|
+
row: 0,
|
|
49338
|
+
column: 0
|
|
49339
|
+
}, copied);
|
|
49340
|
+
let newData = state.cut && state.copied ? unset(state.copied.start, state.model.data) : state.model.data;
|
|
49341
|
+
const commit = [];
|
|
49342
|
+
for (const point of selectedRange || []) {
|
|
49343
|
+
const currentCell = get(point, state.model.data);
|
|
49344
|
+
commit.push({
|
|
49345
|
+
prevCell: currentCell || null,
|
|
49346
|
+
nextCell: cell || null
|
|
49347
|
+
});
|
|
49348
|
+
newData = set(point, cell, newData);
|
|
49349
|
+
}
|
|
49350
|
+
return {
|
|
49351
|
+
...state,
|
|
49352
|
+
model: new Model(createFormulaParser, newData),
|
|
49353
|
+
copied: null,
|
|
49354
|
+
cut: false,
|
|
49355
|
+
hasPasted: true,
|
|
49356
|
+
mode: 'view',
|
|
49357
|
+
lastCommit: commit
|
|
49358
|
+
};
|
|
49359
|
+
}
|
|
49360
|
+
const requiredSize = {
|
|
49361
|
+
rows: active.row + copiedSize.rows,
|
|
49362
|
+
columns: active.column + copiedSize.columns
|
|
49363
|
+
};
|
|
49364
|
+
const paddedData = pad(state.model.data, requiredSize);
|
|
49365
|
+
let acc = {
|
|
49366
|
+
data: paddedData,
|
|
49367
|
+
commit: []
|
|
49368
|
+
};
|
|
49369
|
+
for (const [point, cell] of entries(copied)) {
|
|
49370
|
+
let commit = acc.commit || [];
|
|
49371
|
+
const nextPoint = {
|
|
49372
|
+
row: point.row + active.row,
|
|
49373
|
+
column: point.column + active.column
|
|
49374
|
+
};
|
|
49375
|
+
let nextData = acc.data;
|
|
49376
|
+
if (state.cut) {
|
|
49377
|
+
if (state.copied) {
|
|
49378
|
+
const prevPoint = {
|
|
49379
|
+
row: point.row + state.copied.start.row,
|
|
49380
|
+
column: point.column + state.copied.start.column
|
|
49381
|
+
};
|
|
49382
|
+
nextData = unset(prevPoint, acc.data);
|
|
49383
|
+
}
|
|
49384
|
+
commit = [...commit, {
|
|
49385
|
+
prevCell: cell || null,
|
|
49386
|
+
nextCell: null
|
|
49387
|
+
}];
|
|
49388
|
+
}
|
|
49389
|
+
if (!has$1(nextPoint, paddedData)) {
|
|
49390
|
+
acc = {
|
|
49391
|
+
data: nextData,
|
|
49392
|
+
commit
|
|
49393
|
+
};
|
|
49394
|
+
}
|
|
49395
|
+
const currentCell = get(nextPoint, nextData) || null;
|
|
49396
|
+
commit = [...commit, {
|
|
49397
|
+
prevCell: currentCell,
|
|
49398
|
+
nextCell: cell || null
|
|
49399
|
+
}];
|
|
49400
|
+
acc.data = set(nextPoint, {
|
|
49401
|
+
value: undefined,
|
|
49402
|
+
...currentCell,
|
|
49403
|
+
...cell
|
|
49404
|
+
}, nextData);
|
|
49405
|
+
acc.commit = commit;
|
|
49406
|
+
}
|
|
49407
|
+
return {
|
|
49408
|
+
...state,
|
|
49409
|
+
model: new Model(createFormulaParser, acc.data),
|
|
49410
|
+
selected: new RangeSelection(new PointRange(active, {
|
|
49411
|
+
row: active.row + copiedSize.rows - 1,
|
|
49412
|
+
column: active.column + copiedSize.columns - 1
|
|
49413
|
+
})),
|
|
49414
|
+
copied: null,
|
|
49415
|
+
cut: false,
|
|
49416
|
+
hasPasted: true,
|
|
49417
|
+
mode: 'view',
|
|
49418
|
+
lastCommit: acc.commit
|
|
49419
|
+
};
|
|
49420
|
+
}
|
|
49421
|
+
case EDIT:
|
|
49422
|
+
{
|
|
49423
|
+
return edit(state);
|
|
49424
|
+
}
|
|
49425
|
+
case VIEW:
|
|
49426
|
+
{
|
|
49427
|
+
return view(state);
|
|
49428
|
+
}
|
|
49429
|
+
case CLEAR:
|
|
49430
|
+
{
|
|
49431
|
+
return clear(state);
|
|
49432
|
+
}
|
|
49433
|
+
case BLUR:
|
|
49434
|
+
{
|
|
49435
|
+
return blur(state);
|
|
49436
|
+
}
|
|
49437
|
+
case KEY_DOWN:
|
|
49438
|
+
{
|
|
49439
|
+
const {
|
|
49440
|
+
event
|
|
49441
|
+
} = action.payload;
|
|
49442
|
+
const handler = getKeyDownHandler(state, event);
|
|
49443
|
+
if (handler) {
|
|
49444
|
+
return {
|
|
49445
|
+
...state,
|
|
49446
|
+
...handler(state, event)
|
|
49447
|
+
};
|
|
49448
|
+
}
|
|
49449
|
+
return state;
|
|
49450
|
+
}
|
|
49451
|
+
case DRAG_START:
|
|
49452
|
+
{
|
|
49453
|
+
return {
|
|
49454
|
+
...state,
|
|
49455
|
+
dragging: true
|
|
49456
|
+
};
|
|
49457
|
+
}
|
|
49458
|
+
case DRAG_END:
|
|
49459
|
+
{
|
|
49460
|
+
return {
|
|
49461
|
+
...state,
|
|
49462
|
+
dragging: false
|
|
49463
|
+
};
|
|
49464
|
+
}
|
|
49465
|
+
case COMMIT:
|
|
49466
|
+
{
|
|
49467
|
+
const {
|
|
49468
|
+
changes
|
|
49469
|
+
} = action.payload;
|
|
49470
|
+
return {
|
|
49471
|
+
...state,
|
|
49472
|
+
...commit(changes)
|
|
49473
|
+
};
|
|
49474
|
+
}
|
|
49475
|
+
default:
|
|
49476
|
+
throw new Error('Unknown action');
|
|
49477
|
+
}
|
|
49478
|
+
}
|
|
49479
|
+
// const reducer = createReducer(INITIAL_STATE, (builder) => {
|
|
49480
|
+
// builder.addMatcher(
|
|
49481
|
+
// (action) =>
|
|
49482
|
+
// action.type === Actions.copy.type || action.type === Actions.cut.type,
|
|
49483
|
+
// (state, action) => {
|
|
49484
|
+
// }
|
|
49485
|
+
// );
|
|
49486
|
+
// });
|
|
49487
|
+
// // Shared reducers
|
|
49488
|
+
|
|
49206
49489
|
var scheduler = {exports: {}};
|
|
49207
49490
|
|
|
49208
49491
|
var scheduler_production_min = {};
|
|
@@ -50197,7 +50480,7 @@ const Table = ({
|
|
|
50197
50480
|
const columnCount = columns + (hideColumnIndicators ? 0 : 1);
|
|
50198
50481
|
const columnNodes = range(columnCount).map(i => jsx("col", {}, i));
|
|
50199
50482
|
return jsxs("table", {
|
|
50200
|
-
className: "
|
|
50483
|
+
className: "ff-spreadsheet-table",
|
|
50201
50484
|
children: [jsx("colgroup", {
|
|
50202
50485
|
children: columnNodes
|
|
50203
50486
|
}), jsx("tbody", {
|
|
@@ -50230,8 +50513,8 @@ const CornerIndicator = ({
|
|
|
50230
50513
|
onSelect();
|
|
50231
50514
|
}, [onSelect]);
|
|
50232
50515
|
return jsx("th", {
|
|
50233
|
-
className: classNames('
|
|
50234
|
-
'
|
|
50516
|
+
className: classNames('ff-spreadsheet-header', {
|
|
50517
|
+
'ff-spreadsheet-header--selected': selected
|
|
50235
50518
|
}),
|
|
50236
50519
|
onClick: handleClick,
|
|
50237
50520
|
tabIndex: 0
|
|
@@ -50265,8 +50548,8 @@ const ColumnIndicator = ({
|
|
|
50265
50548
|
const onMouseMove = moveEvent => {
|
|
50266
50549
|
const newWidth = width + (moveEvent.clientX - startX);
|
|
50267
50550
|
setWidth(newWidth);
|
|
50268
|
-
const selectedAllRow = document.querySelector('
|
|
50269
|
-
const selectedSingleRow = document.querySelector('
|
|
50551
|
+
const selectedAllRow = document.querySelector('ff-spreadsheet-floating-rect--selected');
|
|
50552
|
+
const selectedSingleRow = document.querySelector('ff-spreadsheet-active-cell');
|
|
50270
50553
|
// If the element exists, update its height
|
|
50271
50554
|
if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
|
|
50272
50555
|
selectedAllRow.style.width = `${newWidth}px`;
|
|
@@ -50292,8 +50575,8 @@ const ColumnIndicator = ({
|
|
|
50292
50575
|
minWidth: `${width}px`,
|
|
50293
50576
|
position: 'relative'
|
|
50294
50577
|
},
|
|
50295
|
-
className: classNames('
|
|
50296
|
-
'
|
|
50578
|
+
className: classNames('ff-spreadsheet-header', {
|
|
50579
|
+
'ff-spreadsheet-header--selected': selected
|
|
50297
50580
|
}),
|
|
50298
50581
|
onClick: handleClick,
|
|
50299
50582
|
tabIndex: 0,
|
|
@@ -50351,8 +50634,8 @@ const RowIndicator = ({
|
|
|
50351
50634
|
const newHeight = height + (moveEvent.clientY - startY);
|
|
50352
50635
|
setHeight(newHeight);
|
|
50353
50636
|
// Fetch the floating rectangle element from the DOM
|
|
50354
|
-
const selectedAllRow = document.querySelector('.
|
|
50355
|
-
const selectedSingleRow = document.querySelector('.
|
|
50637
|
+
const selectedAllRow = document.querySelector('.ff-spreadsheet-floating-rect--selected');
|
|
50638
|
+
const selectedSingleRow = document.querySelector('.ff-spreadsheet-active-cell');
|
|
50356
50639
|
// If the element exists, update its height
|
|
50357
50640
|
if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
|
|
50358
50641
|
selectedAllRow.style.height = `${newHeight}px`;
|
|
@@ -50377,8 +50660,8 @@ const RowIndicator = ({
|
|
|
50377
50660
|
minWidth: '60px',
|
|
50378
50661
|
position: 'relative'
|
|
50379
50662
|
},
|
|
50380
|
-
className: classNames('
|
|
50381
|
-
'
|
|
50663
|
+
className: classNames('ff-spreadsheet-header', {
|
|
50664
|
+
'ff-spreadsheet-header--selected': selected
|
|
50382
50665
|
}),
|
|
50383
50666
|
onClick: handleClick,
|
|
50384
50667
|
tabIndex: 0,
|
|
@@ -50478,9 +50761,9 @@ const Cell = ({
|
|
|
50478
50761
|
}
|
|
50479
50762
|
return jsxs("td", {
|
|
50480
50763
|
ref: rootRef,
|
|
50481
|
-
|
|
50482
|
-
className: classNames('
|
|
50483
|
-
'
|
|
50764
|
+
style: data?.style,
|
|
50765
|
+
className: classNames('ff-spreadsheet-cell', data?.className, {
|
|
50766
|
+
'ff-spreadsheet-active-cell': active || dragging
|
|
50484
50767
|
}),
|
|
50485
50768
|
onMouseEnter: handleMouseOver,
|
|
50486
50769
|
onMouseDown: handleMouseDown,
|
|
@@ -50546,11 +50829,11 @@ const DataViewer = ({
|
|
|
50546
50829
|
}) => {
|
|
50547
50830
|
const value = getValue(cell, evaluatedCell);
|
|
50548
50831
|
return typeof value === 'boolean' ? jsx("span", {
|
|
50549
|
-
className: "
|
|
50832
|
+
className: "ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean",
|
|
50550
50833
|
children: convertBooleanToText(value)
|
|
50551
50834
|
}) : jsx("span", {
|
|
50552
|
-
className: classNames('
|
|
50553
|
-
'
|
|
50835
|
+
className: classNames('ff-spreadsheet-data-viewer', {
|
|
50836
|
+
'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value)
|
|
50554
50837
|
}),
|
|
50555
50838
|
children: value
|
|
50556
50839
|
});
|
|
@@ -50586,7 +50869,7 @@ const DataEditor = ({
|
|
|
50586
50869
|
}, [inputRef]);
|
|
50587
50870
|
const value = cell?.value ?? '';
|
|
50588
50871
|
return jsx("div", {
|
|
50589
|
-
className: "
|
|
50872
|
+
className: "ff-spreadsheet-data-editor",
|
|
50590
50873
|
children: jsx("input", {
|
|
50591
50874
|
ref: inputRef,
|
|
50592
50875
|
type: "text",
|
|
@@ -50656,7 +50939,7 @@ const ActiveCell = props => {
|
|
|
50656
50939
|
const readOnly = cell && cell.readOnly;
|
|
50657
50940
|
return hidden ? null : jsx("div", {
|
|
50658
50941
|
ref: rootRef,
|
|
50659
|
-
className: classNames('
|
|
50942
|
+
className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
|
|
50660
50943
|
style: dimensions,
|
|
50661
50944
|
onClick: mode === 'view' && !readOnly ? edit : undefined,
|
|
50662
50945
|
tabIndex: 0,
|
|
@@ -50684,10 +50967,10 @@ const FloatingRect = ({
|
|
|
50684
50967
|
left
|
|
50685
50968
|
} = dimensions || {};
|
|
50686
50969
|
return jsx("div", {
|
|
50687
|
-
className: classNames('
|
|
50688
|
-
[`
|
|
50689
|
-
'
|
|
50690
|
-
'
|
|
50970
|
+
className: classNames('ff-spreadsheet-floating-rect', {
|
|
50971
|
+
[`ff-spreadsheet-floating-rect--${variant}`]: variant,
|
|
50972
|
+
'ff-spreadsheet-floating-rect--dragging': dragging,
|
|
50973
|
+
'ff-spreadsheet-floating-rect--hidden': hidden
|
|
50691
50974
|
}),
|
|
50692
50975
|
style: {
|
|
50693
50976
|
width,
|
|
@@ -50723,15 +51006,15 @@ const Copied = () => {
|
|
|
50723
51006
|
});
|
|
50724
51007
|
};
|
|
50725
51008
|
|
|
50726
|
-
var css_248z$
|
|
51009
|
+
var css_248z$4 = ".ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--toggle-strip-color);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n background-color: var(--elevation);\n height: 7px;\n width: 7px;\n border-radius: 50%;\n position: absolute;\n right: -3px;\n z-index: 10;\n bottom: -3px;\n cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
|
|
51010
|
+
styleInject(css_248z$4);
|
|
51011
|
+
|
|
51012
|
+
var css_248z$3 = ".excel-row {\n height: 42px;\n align-items: center;\n}\n.excel-row .excel-toolbar {\n display: flex;\n align-items: center;\n justify-content: start;\n width: 100%;\n gap: 10px;\n}\n.excel-row .excel-toolbar-center {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n width: 100%;\n gap: 10px;\n}\n.excel-row .excel-toolbar-center .menu-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.excel-row .excel-toolbar-menu {\n display: flex;\n align-items: center;\n}\n.excel-row .excel-toolbar-hide {\n display: none;\n}";
|
|
50727
51013
|
styleInject(css_248z$3);
|
|
50728
51014
|
|
|
50729
|
-
var css_248z$2 = ".
|
|
51015
|
+
var css_248z$2 = ".color-bar {\n background-color: var(--error_light);\n width: 100%;\n height: 4px;\n}\n.color-bar .colorPicker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
|
|
50730
51016
|
styleInject(css_248z$2);
|
|
50731
51017
|
|
|
50732
|
-
var css_248z$1 = ".color-bar {\n background-color: var(--error_light);\n width: 100%;\n height: 4px;\n}\n.color-bar .colorPicker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
|
|
50733
|
-
styleInject(css_248z$1);
|
|
50734
|
-
|
|
50735
51018
|
const ColorBarSelector = ({
|
|
50736
51019
|
getColorValue,
|
|
50737
51020
|
disabled
|
|
@@ -50767,61 +51050,93 @@ const ExcelToolBar = ({
|
|
|
50767
51050
|
data,
|
|
50768
51051
|
onBold,
|
|
50769
51052
|
onItalic,
|
|
50770
|
-
|
|
51053
|
+
setUnderlineType,
|
|
50771
51054
|
setColor,
|
|
51055
|
+
setFontSize,
|
|
51056
|
+
setFontFamily,
|
|
51057
|
+
setTextAlign,
|
|
50772
51058
|
setBackgroundColor,
|
|
51059
|
+
setBorderType,
|
|
50773
51060
|
setFormatePainter
|
|
50774
51061
|
}) => {
|
|
50775
|
-
const [
|
|
50776
|
-
const [
|
|
51062
|
+
const [border, setBorder] = useState('border-all-sides');
|
|
51063
|
+
const [underLine, setUnderLine] = useState('underline');
|
|
50777
51064
|
const [colorContainer, setColorPicker] = useState({
|
|
50778
51065
|
color: 'var(--error-light)',
|
|
50779
51066
|
backgroundColor: 'var(--error-light)',
|
|
50780
51067
|
borderColor: 'var(--text-color)'
|
|
50781
51068
|
});
|
|
50782
51069
|
const [formatePainterState, setFormatePainterState] = useState(false);
|
|
50783
|
-
const borderTypeIcon =
|
|
50784
|
-
|
|
50785
|
-
|
|
50786
|
-
|
|
50787
|
-
|
|
50788
|
-
|
|
50789
|
-
|
|
50790
|
-
|
|
50791
|
-
|
|
50792
|
-
|
|
50793
|
-
|
|
50794
|
-
|
|
50795
|
-
|
|
50796
|
-
|
|
50797
|
-
|
|
50798
|
-
|
|
50799
|
-
|
|
50800
|
-
|
|
50801
|
-
|
|
50802
|
-
|
|
50803
|
-
|
|
50804
|
-
|
|
50805
|
-
|
|
50806
|
-
|
|
50807
|
-
|
|
50808
|
-
|
|
50809
|
-
|
|
50810
|
-
|
|
50811
|
-
|
|
50812
|
-
|
|
50813
|
-
|
|
50814
|
-
|
|
50815
|
-
|
|
50816
|
-
|
|
50817
|
-
|
|
50818
|
-
|
|
50819
|
-
|
|
50820
|
-
|
|
50821
|
-
|
|
50822
|
-
|
|
50823
|
-
|
|
50824
|
-
}
|
|
51070
|
+
const borderTypeIcon = [{
|
|
51071
|
+
value: 'border-all-sides',
|
|
51072
|
+
label: 'All Border',
|
|
51073
|
+
icon: 'all_borders'
|
|
51074
|
+
}, {
|
|
51075
|
+
value: 'border-bottom',
|
|
51076
|
+
label: 'Border Bottom',
|
|
51077
|
+
icon: 'border_bottom'
|
|
51078
|
+
}, {
|
|
51079
|
+
value: 'border-left',
|
|
51080
|
+
label: 'Border Left',
|
|
51081
|
+
icon: 'border_left'
|
|
51082
|
+
}, {
|
|
51083
|
+
value: 'border-right',
|
|
51084
|
+
label: 'Border Right',
|
|
51085
|
+
icon: 'border_right'
|
|
51086
|
+
}, {
|
|
51087
|
+
value: 'border-top',
|
|
51088
|
+
label: 'Border Top',
|
|
51089
|
+
icon: 'border_top'
|
|
51090
|
+
}, {
|
|
51091
|
+
value: 'border-none',
|
|
51092
|
+
label: 'No Border',
|
|
51093
|
+
icon: 'no_border'
|
|
51094
|
+
}];
|
|
51095
|
+
const underlineTypeIcon = [{
|
|
51096
|
+
value: 'underline',
|
|
51097
|
+
label: 'Underline',
|
|
51098
|
+
icon: 'underline'
|
|
51099
|
+
}, {
|
|
51100
|
+
value: 'double_border',
|
|
51101
|
+
label: 'Double Underline',
|
|
51102
|
+
icon: 'double_underline'
|
|
51103
|
+
}, {
|
|
51104
|
+
value: 'line-through',
|
|
51105
|
+
label: 'Strikethrough',
|
|
51106
|
+
icon: 'strike_through'
|
|
51107
|
+
}];
|
|
51108
|
+
const fontFamily = [{
|
|
51109
|
+
label: 'Times New Roman',
|
|
51110
|
+
value: '"Times New Roman"'
|
|
51111
|
+
}, {
|
|
51112
|
+
label: 'Arial',
|
|
51113
|
+
value: 'Arial'
|
|
51114
|
+
}, {
|
|
51115
|
+
label: 'Courier New',
|
|
51116
|
+
value: '"Courier New"'
|
|
51117
|
+
}];
|
|
51118
|
+
const fontSize = [{
|
|
51119
|
+
label: '5',
|
|
51120
|
+
value: '5'
|
|
51121
|
+
}, {
|
|
51122
|
+
label: '9',
|
|
51123
|
+
value: '9'
|
|
51124
|
+
}, {
|
|
51125
|
+
label: '11',
|
|
51126
|
+
value: '11'
|
|
51127
|
+
}, {
|
|
51128
|
+
label: '12',
|
|
51129
|
+
value: '12'
|
|
51130
|
+
}, {
|
|
51131
|
+
label: '14',
|
|
51132
|
+
value: '14'
|
|
51133
|
+
}, {
|
|
51134
|
+
label: '16',
|
|
51135
|
+
value: '16'
|
|
51136
|
+
}, {
|
|
51137
|
+
label: '18',
|
|
51138
|
+
value: '18'
|
|
51139
|
+
}];
|
|
50825
51140
|
const getTextColor = color => {
|
|
50826
51141
|
setColorPicker(prev => ({
|
|
50827
51142
|
...prev,
|
|
@@ -50836,7 +51151,6 @@ const ExcelToolBar = ({
|
|
|
50836
51151
|
};
|
|
50837
51152
|
useEffect(() => {
|
|
50838
51153
|
let timeGap = setTimeout(() => {
|
|
50839
|
-
console.log(colorContainer.color);
|
|
50840
51154
|
setColor(data, colorContainer.color);
|
|
50841
51155
|
}, 0);
|
|
50842
51156
|
return () => {
|
|
@@ -50851,204 +51165,206 @@ const ExcelToolBar = ({
|
|
|
50851
51165
|
clearTimeout(timeGap);
|
|
50852
51166
|
};
|
|
50853
51167
|
}, [colorContainer.backgroundColor]);
|
|
50854
|
-
return jsxs(
|
|
50855
|
-
className:
|
|
50856
|
-
|
|
50857
|
-
|
|
50858
|
-
|
|
50859
|
-
|
|
50860
|
-
|
|
50861
|
-
|
|
50862
|
-
|
|
50863
|
-
|
|
50864
|
-
|
|
50865
|
-
|
|
50866
|
-
|
|
51168
|
+
return jsxs(Row$1, {
|
|
51169
|
+
className: "excel-row",
|
|
51170
|
+
gap: "40px",
|
|
51171
|
+
children: [jsx(Col, {
|
|
51172
|
+
size: 3,
|
|
51173
|
+
children: jsxs("div", {
|
|
51174
|
+
className: "excel-toolbar",
|
|
51175
|
+
children: [jsx(Select$1, {
|
|
51176
|
+
className: "textType",
|
|
51177
|
+
onChange: e => {
|
|
51178
|
+
setFontFamily(data, e.value);
|
|
51179
|
+
},
|
|
51180
|
+
optionsList: fontFamily,
|
|
51181
|
+
selectedOption: {
|
|
51182
|
+
label: 'Times New Roman',
|
|
51183
|
+
value: '"Times New Roman"'
|
|
51184
|
+
}
|
|
51185
|
+
}), jsx(Select$1, {
|
|
51186
|
+
className: "selectTag",
|
|
51187
|
+
onChange: e => {
|
|
51188
|
+
setFontSize(data, e.value);
|
|
51189
|
+
},
|
|
51190
|
+
optionsList: fontSize,
|
|
51191
|
+
selectedOption: {
|
|
51192
|
+
label: '11',
|
|
51193
|
+
value: '11'
|
|
51194
|
+
}
|
|
51195
|
+
})]
|
|
50867
51196
|
})
|
|
50868
|
-
}), jsx(
|
|
50869
|
-
|
|
50870
|
-
|
|
50871
|
-
|
|
50872
|
-
|
|
50873
|
-
|
|
50874
|
-
|
|
50875
|
-
|
|
50876
|
-
|
|
51197
|
+
}), jsx(Col, {
|
|
51198
|
+
size: 2,
|
|
51199
|
+
children: jsxs("div", {
|
|
51200
|
+
className: "excel-toolbar-center",
|
|
51201
|
+
children: [jsx(Icon, {
|
|
51202
|
+
hoverEffect: true,
|
|
51203
|
+
disabled: toolbar === 'disable',
|
|
51204
|
+
onClick: () => {
|
|
51205
|
+
setTextAlign(data, 'left');
|
|
51206
|
+
},
|
|
51207
|
+
name: "text_align_left"
|
|
51208
|
+
}), jsx(Icon, {
|
|
51209
|
+
hoverEffect: true,
|
|
51210
|
+
disabled: toolbar === 'disable',
|
|
51211
|
+
onClick: () => {
|
|
51212
|
+
setTextAlign(data, 'center');
|
|
51213
|
+
},
|
|
51214
|
+
name: "text_align_center"
|
|
51215
|
+
}), jsx(Icon, {
|
|
51216
|
+
hoverEffect: true,
|
|
51217
|
+
disabled: toolbar === 'disable',
|
|
51218
|
+
onClick: () => {
|
|
51219
|
+
setTextAlign(data, 'right');
|
|
51220
|
+
},
|
|
51221
|
+
name: "text_align_right"
|
|
51222
|
+
})]
|
|
50877
51223
|
})
|
|
50878
|
-
}), jsx(
|
|
50879
|
-
|
|
50880
|
-
|
|
50881
|
-
|
|
50882
|
-
|
|
50883
|
-
|
|
50884
|
-
|
|
50885
|
-
}, {
|
|
50886
|
-
label: 'Option 2',
|
|
50887
|
-
value: '2'
|
|
50888
|
-
}, {
|
|
50889
|
-
label: 'Option 3',
|
|
50890
|
-
value: '3'
|
|
50891
|
-
}],
|
|
50892
|
-
selectedOption: {
|
|
50893
|
-
label: 'Option 2',
|
|
50894
|
-
value: 'Arial'
|
|
50895
|
-
}
|
|
50896
|
-
}), jsx(Select$1, {
|
|
50897
|
-
label: "Text Size",
|
|
50898
|
-
onChange: () => {},
|
|
50899
|
-
optionsList: [{
|
|
50900
|
-
label: 'Option 1',
|
|
50901
|
-
value: '1'
|
|
50902
|
-
}, {
|
|
50903
|
-
label: 'Option 2',
|
|
50904
|
-
value: '2'
|
|
50905
|
-
}, {
|
|
50906
|
-
label: 'Option 3',
|
|
50907
|
-
value: '3'
|
|
50908
|
-
}],
|
|
50909
|
-
selectedOption: {
|
|
50910
|
-
label: 'Option 2',
|
|
50911
|
-
value: '11'
|
|
50912
|
-
}
|
|
50913
|
-
}), jsxs("div", {
|
|
50914
|
-
style: {
|
|
50915
|
-
display: 'flex',
|
|
50916
|
-
alignItems: 'center'
|
|
50917
|
-
},
|
|
50918
|
-
children: [jsx(Tooltip, {
|
|
50919
|
-
placement: "top",
|
|
50920
|
-
title: 'Formate Painter',
|
|
50921
|
-
children: jsx("div", {
|
|
50922
|
-
className: formatePainterState ? 'formate-painter-active' : '',
|
|
51224
|
+
}), jsx(Col, {
|
|
51225
|
+
size: 2,
|
|
51226
|
+
children: jsxs("div", {
|
|
51227
|
+
className: "excel-toolbar-center",
|
|
51228
|
+
children: [jsx(Tooltip, {
|
|
51229
|
+
placement: "top",
|
|
51230
|
+
title: 'Bold',
|
|
50923
51231
|
children: jsx(Icon, {
|
|
51232
|
+
hoverEffect: true,
|
|
50924
51233
|
disabled: toolbar === 'disable',
|
|
50925
51234
|
onClick: () => {
|
|
50926
|
-
|
|
51235
|
+
onBold(data);
|
|
50927
51236
|
},
|
|
50928
|
-
name: "
|
|
51237
|
+
name: "bold"
|
|
50929
51238
|
})
|
|
50930
|
-
})
|
|
50931
|
-
|
|
50932
|
-
|
|
50933
|
-
options: borderTypeIcon(),
|
|
50934
|
-
tooltipTitle: "Border Type",
|
|
50935
|
-
tooltipPlacement: "top",
|
|
50936
|
-
onOptionClick: () => {
|
|
50937
|
-
setBorderType(borderType);
|
|
50938
|
-
}
|
|
50939
|
-
})]
|
|
50940
|
-
}), jsxs("div", {
|
|
50941
|
-
style: {
|
|
50942
|
-
display: 'flex',
|
|
50943
|
-
alignItems: 'center'
|
|
50944
|
-
},
|
|
50945
|
-
children: [jsx(Tooltip, {
|
|
50946
|
-
placement: "top",
|
|
50947
|
-
title: 'Formate Painter',
|
|
50948
|
-
children: jsx("div", {
|
|
50949
|
-
className: formatePainterState ? 'formate-painter-active' : '',
|
|
51239
|
+
}), jsx(Tooltip, {
|
|
51240
|
+
placement: "top",
|
|
51241
|
+
title: 'Italic',
|
|
50950
51242
|
children: jsx(Icon, {
|
|
51243
|
+
hoverEffect: true,
|
|
50951
51244
|
disabled: toolbar === 'disable',
|
|
50952
51245
|
onClick: () => {
|
|
50953
|
-
|
|
50954
|
-
setFormatePainterState(prev => !prev);
|
|
51246
|
+
onItalic(data);
|
|
50955
51247
|
},
|
|
50956
|
-
name: "
|
|
51248
|
+
name: "italic"
|
|
50957
51249
|
})
|
|
50958
|
-
})
|
|
50959
|
-
|
|
50960
|
-
|
|
50961
|
-
|
|
50962
|
-
|
|
50963
|
-
|
|
50964
|
-
|
|
50965
|
-
|
|
50966
|
-
|
|
50967
|
-
|
|
50968
|
-
|
|
50969
|
-
|
|
50970
|
-
|
|
50971
|
-
|
|
50972
|
-
|
|
50973
|
-
|
|
50974
|
-
|
|
50975
|
-
|
|
50976
|
-
|
|
50977
|
-
|
|
50978
|
-
|
|
50979
|
-
|
|
50980
|
-
|
|
50981
|
-
|
|
50982
|
-
|
|
50983
|
-
|
|
50984
|
-
|
|
50985
|
-
|
|
50986
|
-
|
|
50987
|
-
|
|
50988
|
-
|
|
50989
|
-
|
|
50990
|
-
// formatePaint();
|
|
50991
|
-
},
|
|
50992
|
-
name: "strike_through"
|
|
50993
|
-
})
|
|
50994
|
-
})
|
|
50995
|
-
}), jsx(Tooltip, {
|
|
50996
|
-
placement: "top",
|
|
50997
|
-
title: 'Underline',
|
|
50998
|
-
children: jsx("div", {
|
|
50999
|
-
children: jsx(Icon, {
|
|
51000
|
-
disabled: toolbar === 'disable',
|
|
51001
|
-
onClick: () => {
|
|
51002
|
-
onUnderline(data);
|
|
51003
|
-
},
|
|
51004
|
-
name: "underline"
|
|
51005
|
-
})
|
|
51250
|
+
}), jsx(Tooltip, {
|
|
51251
|
+
placement: "top",
|
|
51252
|
+
title: 'Underline',
|
|
51253
|
+
children: jsxs("div", {
|
|
51254
|
+
className: "excel-toolbar-menu",
|
|
51255
|
+
children: [jsx(Tooltip, {
|
|
51256
|
+
placement: "top",
|
|
51257
|
+
title: 'Formate Painter',
|
|
51258
|
+
children: jsx("div", {
|
|
51259
|
+
className: formatePainterState ? 'formate-painter-active' : '',
|
|
51260
|
+
children: jsx(Icon, {
|
|
51261
|
+
hoverEffect: true,
|
|
51262
|
+
disabled: toolbar === 'disable',
|
|
51263
|
+
onClick: () => {
|
|
51264
|
+
setUnderlineType(data, underLine, true);
|
|
51265
|
+
},
|
|
51266
|
+
name: "underline"
|
|
51267
|
+
})
|
|
51268
|
+
})
|
|
51269
|
+
}), jsx(MenuOption, {
|
|
51270
|
+
iconName: "arrow_down",
|
|
51271
|
+
options: underlineTypeIcon,
|
|
51272
|
+
tooltipTitle: "Border Type",
|
|
51273
|
+
tooltipPlacement: "top",
|
|
51274
|
+
variant: "light",
|
|
51275
|
+
onOptionClick: e => {
|
|
51276
|
+
setUnderlineType(data, e.value, true);
|
|
51277
|
+
setUnderLine(e.value);
|
|
51278
|
+
}
|
|
51279
|
+
})]
|
|
51280
|
+
})
|
|
51281
|
+
})]
|
|
51006
51282
|
})
|
|
51007
|
-
}), jsx(
|
|
51008
|
-
|
|
51009
|
-
|
|
51010
|
-
|
|
51011
|
-
|
|
51012
|
-
|
|
51013
|
-
|
|
51014
|
-
|
|
51015
|
-
|
|
51016
|
-
|
|
51017
|
-
|
|
51018
|
-
|
|
51283
|
+
}), jsx(Col, {
|
|
51284
|
+
size: 2,
|
|
51285
|
+
children: jsxs("div", {
|
|
51286
|
+
className: "excel-toolbar-center",
|
|
51287
|
+
children: [jsx(Tooltip, {
|
|
51288
|
+
placement: "top",
|
|
51289
|
+
title: 'Formate Painter',
|
|
51290
|
+
children: jsx("div", {
|
|
51291
|
+
className: formatePainterState ? 'formate-painter-active' : '',
|
|
51292
|
+
children: jsx(Icon, {
|
|
51293
|
+
hoverEffect: true,
|
|
51294
|
+
disabled: toolbar === 'disable',
|
|
51295
|
+
onClick: () => {
|
|
51296
|
+
setFormatePainter(data);
|
|
51297
|
+
setFormatePainterState(prev => !prev);
|
|
51298
|
+
},
|
|
51299
|
+
name: "formate_painter"
|
|
51300
|
+
})
|
|
51301
|
+
})
|
|
51302
|
+
}), jsx("div", {
|
|
51303
|
+
className: "menu-option",
|
|
51304
|
+
children: jsxs(Tooltip, {
|
|
51305
|
+
placement: "top",
|
|
51306
|
+
title: 'Text Color',
|
|
51307
|
+
children: [jsx(Icon, {
|
|
51308
|
+
hoverEffect: true,
|
|
51309
|
+
disabled: toolbar === 'disable',
|
|
51310
|
+
onClick: () => {
|
|
51311
|
+
setColor(data, colorContainer.color);
|
|
51312
|
+
},
|
|
51313
|
+
name: "text_color"
|
|
51314
|
+
}), jsx(ColorBarSelector, {
|
|
51315
|
+
disabled: toolbar === 'disable',
|
|
51316
|
+
getColorValue: getTextColor
|
|
51317
|
+
})]
|
|
51318
|
+
})
|
|
51319
|
+
}), jsxs("div", {
|
|
51320
|
+
className: "menu-option",
|
|
51321
|
+
children: [jsx(Tooltip, {
|
|
51322
|
+
placement: "top",
|
|
51323
|
+
title: 'Background Color',
|
|
51324
|
+
children: jsx(Icon, {
|
|
51325
|
+
hoverEffect: true,
|
|
51326
|
+
disabled: toolbar === 'disable',
|
|
51327
|
+
onClick: () => {
|
|
51328
|
+
setBackgroundColor(data, colorContainer.backgroundColor);
|
|
51329
|
+
},
|
|
51330
|
+
name: "fill_color"
|
|
51331
|
+
})
|
|
51332
|
+
}), jsx(ColorBarSelector, {
|
|
51333
|
+
disabled: toolbar === 'disable',
|
|
51334
|
+
getColorValue: getBackgroundColor
|
|
51335
|
+
})]
|
|
51336
|
+
})]
|
|
51019
51337
|
})
|
|
51020
|
-
}), jsx(
|
|
51021
|
-
|
|
51022
|
-
children: jsxs(
|
|
51023
|
-
|
|
51024
|
-
|
|
51025
|
-
|
|
51026
|
-
|
|
51027
|
-
|
|
51028
|
-
|
|
51029
|
-
|
|
51030
|
-
|
|
51031
|
-
|
|
51032
|
-
|
|
51033
|
-
|
|
51338
|
+
}), jsx(Col, {
|
|
51339
|
+
size: 1,
|
|
51340
|
+
children: jsxs("div", {
|
|
51341
|
+
className: "excel-toolbar-menu",
|
|
51342
|
+
children: [jsx(Tooltip, {
|
|
51343
|
+
placement: "top",
|
|
51344
|
+
title: 'Formate Painter',
|
|
51345
|
+
children: jsx("div", {
|
|
51346
|
+
className: formatePainterState ? 'formate-painter-active' : '',
|
|
51347
|
+
children: jsx(Icon, {
|
|
51348
|
+
hoverEffect: true,
|
|
51349
|
+
disabled: toolbar === 'disable',
|
|
51350
|
+
onClick: () => {
|
|
51351
|
+
setBorderType(data, border, 'black');
|
|
51352
|
+
},
|
|
51353
|
+
name: "all_borders"
|
|
51354
|
+
})
|
|
51355
|
+
})
|
|
51356
|
+
}), jsx(MenuOption, {
|
|
51357
|
+
iconName: "arrow_down",
|
|
51358
|
+
options: borderTypeIcon,
|
|
51359
|
+
tooltipTitle: "Border Type",
|
|
51360
|
+
tooltipPlacement: "top",
|
|
51361
|
+
variant: "light",
|
|
51362
|
+
onOptionClick: e => {
|
|
51363
|
+
setBorder(e.value);
|
|
51364
|
+
setBorderType(data, e.value, 'black');
|
|
51365
|
+
}
|
|
51034
51366
|
})]
|
|
51035
51367
|
})
|
|
51036
|
-
}), jsxs("div", {
|
|
51037
|
-
className: "menu-option",
|
|
51038
|
-
children: [jsx(Tooltip, {
|
|
51039
|
-
placement: "top",
|
|
51040
|
-
title: 'Background Color',
|
|
51041
|
-
children: jsx(Icon, {
|
|
51042
|
-
disabled: toolbar === 'disable',
|
|
51043
|
-
onClick: () => {
|
|
51044
|
-
setBackgroundColor(data, colorContainer.backgroundColor);
|
|
51045
|
-
},
|
|
51046
|
-
name: "fill_color"
|
|
51047
|
-
})
|
|
51048
|
-
}), jsx(ColorBarSelector, {
|
|
51049
|
-
disabled: toolbar === 'disable',
|
|
51050
|
-
getColorValue: getBackgroundColor
|
|
51051
|
-
})]
|
|
51052
51368
|
})]
|
|
51053
51369
|
});
|
|
51054
51370
|
};
|
|
@@ -51061,20 +51377,12 @@ const Spreadsheet = props => {
|
|
|
51061
51377
|
className,
|
|
51062
51378
|
columnLabels,
|
|
51063
51379
|
rowLabels,
|
|
51064
|
-
// hideColumnIndicators,
|
|
51065
|
-
// hideRowIndicators,
|
|
51066
51380
|
onKeyDown,
|
|
51067
51381
|
Table: Table$1 = Table,
|
|
51068
51382
|
Row: Row$1 = Row,
|
|
51069
51383
|
HeaderRow: HeaderRow$1 = HeaderRow,
|
|
51070
51384
|
DataEditor: DataEditor$1 = DataEditor,
|
|
51071
51385
|
DataViewer: DataViewer$1 = DataViewer,
|
|
51072
|
-
// onChange = () => {},
|
|
51073
|
-
// onModeChange = () => {},
|
|
51074
|
-
onSelect = () => {},
|
|
51075
|
-
onActivate = () => {},
|
|
51076
|
-
// onBlur = () => {},
|
|
51077
|
-
// onCellCommit = () => {},
|
|
51078
51386
|
onEvaluatedDataChange = () => {}
|
|
51079
51387
|
} = props;
|
|
51080
51388
|
const initialState = React.useMemo(() => {
|
|
@@ -51101,7 +51409,6 @@ const Spreadsheet = props => {
|
|
|
51101
51409
|
const copy$1 = useAction(copy);
|
|
51102
51410
|
const paste$1 = useAction(paste);
|
|
51103
51411
|
const onKeyDownAction = useAction(keyDown);
|
|
51104
|
-
const onKeyPress = useAction(keyPress);
|
|
51105
51412
|
const onDragStart = useAction(dragStart);
|
|
51106
51413
|
const onDragEnd = useAction(dragEnd);
|
|
51107
51414
|
const setData$1 = useAction(setData);
|
|
@@ -51109,24 +51416,14 @@ const Spreadsheet = props => {
|
|
|
51109
51416
|
const setSelection$1 = useAction(setSelection);
|
|
51110
51417
|
const onBold = useAction(bold);
|
|
51111
51418
|
const onItalic = useAction(italic);
|
|
51112
|
-
const
|
|
51419
|
+
const setUnderlineType = useAction(underlineType);
|
|
51420
|
+
const setTextAlign = useAction(textAlign);
|
|
51421
|
+
const setFontSize = useAction(fontSize);
|
|
51422
|
+
const setFontFamily = useAction(fontFamily);
|
|
51423
|
+
const setBorderType = useAction(borderType);
|
|
51113
51424
|
const setColor = useAction(color);
|
|
51114
51425
|
const setBackgroundColor = useAction(backgroundStyle);
|
|
51115
51426
|
const setFormatePainter = useAction(formatePainter);
|
|
51116
|
-
const prevActiveRef = React.useRef(state.active);
|
|
51117
|
-
React.useEffect(() => {
|
|
51118
|
-
if (state.active !== prevActiveRef.current) {
|
|
51119
|
-
if (state.active) {
|
|
51120
|
-
onActivate(state.active);
|
|
51121
|
-
} else {
|
|
51122
|
-
const root = rootRef.current;
|
|
51123
|
-
if (root && isFocusedWithin(root) && document.activeElement) {
|
|
51124
|
-
document.activeElement.blur();
|
|
51125
|
-
}
|
|
51126
|
-
}
|
|
51127
|
-
}
|
|
51128
|
-
prevActiveRef.current = state.active;
|
|
51129
|
-
}, [onActivate, state.active]);
|
|
51130
51427
|
const prevEvaluatedDataRef = React.useRef(state.model.evaluatedData);
|
|
51131
51428
|
React.useEffect(() => {
|
|
51132
51429
|
if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
|
|
@@ -51134,16 +51431,6 @@ const Spreadsheet = props => {
|
|
|
51134
51431
|
}
|
|
51135
51432
|
prevEvaluatedDataRef.current = state.model.evaluatedData;
|
|
51136
51433
|
}, [state?.model?.evaluatedData, onEvaluatedDataChange]);
|
|
51137
|
-
const prevSelectedRef = React.useRef(state.selected);
|
|
51138
|
-
React.useEffect(() => {
|
|
51139
|
-
if (!state.selected.equals(prevSelectedRef.current)) {
|
|
51140
|
-
// Call on select only if the selection change internal
|
|
51141
|
-
if (!props.selected || !state.selected.equals(props.selected)) {
|
|
51142
|
-
onSelect(state.selected);
|
|
51143
|
-
}
|
|
51144
|
-
}
|
|
51145
|
-
prevSelectedRef.current = state.selected;
|
|
51146
|
-
}, [state.selected, onSelect, props.selected]);
|
|
51147
51434
|
// Update selection when props.selected changes
|
|
51148
51435
|
const prevSelectedPropRef = React.useRef(props.selected);
|
|
51149
51436
|
React.useEffect(() => {
|
|
@@ -51160,7 +51447,6 @@ const Spreadsheet = props => {
|
|
|
51160
51447
|
}
|
|
51161
51448
|
prevDataPropRef.current = props.data;
|
|
51162
51449
|
}, [props.data, setData$1]);
|
|
51163
|
-
// Update createFormulaParser when props.createFormulaParser changes
|
|
51164
51450
|
const prevCreateFormulaParserPropRef = React.useRef(props.createFormulaParser);
|
|
51165
51451
|
React.useEffect(() => {
|
|
51166
51452
|
if (props.createFormulaParser !== prevCreateFormulaParserPropRef.current && props.createFormulaParser) setCreateFormulaParser$1(props.createFormulaParser);
|
|
@@ -51283,32 +51569,36 @@ const Spreadsheet = props => {
|
|
|
51283
51569
|
data: props.data,
|
|
51284
51570
|
onBold: onBold,
|
|
51285
51571
|
onItalic: onItalic,
|
|
51286
|
-
|
|
51572
|
+
setUnderlineType: setUnderlineType,
|
|
51287
51573
|
setColor: setColor,
|
|
51574
|
+
setBorderType: setBorderType,
|
|
51575
|
+
setFontSize: setFontSize,
|
|
51576
|
+
setFontFamily: setFontFamily,
|
|
51577
|
+
setTextAlign: setTextAlign,
|
|
51288
51578
|
setBackgroundColor: setBackgroundColor,
|
|
51289
51579
|
setFormatePainter: setFormatePainter
|
|
51290
51580
|
}), jsxs("div", {
|
|
51291
51581
|
ref: rootRef,
|
|
51292
|
-
className: classNames('
|
|
51293
|
-
onKeyPress: onKeyPress,
|
|
51582
|
+
className: classNames('ff-spreadsheet', className),
|
|
51294
51583
|
onKeyDown: handleKeyDown,
|
|
51295
51584
|
onMouseMove: handleMouseMove,
|
|
51296
51585
|
children: [tableNode, activeCellNode, jsx(Selected, {}), jsx(Copied, {})]
|
|
51297
51586
|
})]
|
|
51298
|
-
}), [className,
|
|
51587
|
+
}), [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]);
|
|
51299
51588
|
return jsx(context.Provider, {
|
|
51300
51589
|
value: reducerElements,
|
|
51301
51590
|
children: rootNode
|
|
51302
51591
|
});
|
|
51303
51592
|
};
|
|
51304
51593
|
|
|
51594
|
+
var css_248z$1 = ".excel-page {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.excel-page .excel-book {\n position: relative;\n width: 100%;\n}\n.excel-page .excel-book .excel-sheet {\n overflow: auto;\n scrollbar-width: thin;\n}\n.excel-page .excel-book .sheet-bar {\n margin-top: 5px;\n padding: 0p 20px;\n align-items: center;\n}\n.excel-page .excel-book .sheet-bar .add-sheet-icon {\n display: flex;\n align-items: start;\n justify-content: center;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container {\n display: flex;\n overflow-x: auto;\n align-items: center;\n scrollbar-width: thin;\n scrollbar-color: var(--hover-color) transparent;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container::-webkit-scrollbar-thumb {\n border-radius: 5px;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list {\n padding: 10px 20px;\n min-width: max-content;\n cursor: pointer;\n display: flex;\n font-weight: bold;\n background-color: var(--hover-color);\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list.active {\n background-color: var(--excel-sheet-button-color);\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list:focus {\n outline: none;\n text-decoration: none;\n}\n\n.menu-list {\n display: flex;\n align-items: center;\n}\n.menu-list .menu-title {\n padding-left: 5px;\n}";
|
|
51595
|
+
styleInject(css_248z$1);
|
|
51596
|
+
|
|
51305
51597
|
const ExcelFile = ({
|
|
51306
51598
|
excelData,
|
|
51307
51599
|
onSave = () => {}
|
|
51308
51600
|
}) => {
|
|
51309
|
-
const [
|
|
51310
|
-
sheetNames: []
|
|
51311
|
-
});
|
|
51601
|
+
const [sheetNames, setSheetNames] = useState([]);
|
|
51312
51602
|
const EmptyRow = {
|
|
51313
51603
|
value: '',
|
|
51314
51604
|
style: {
|
|
@@ -51325,10 +51615,8 @@ const ExcelFile = ({
|
|
|
51325
51615
|
defaultSheet: [[EmptyRow]]
|
|
51326
51616
|
});
|
|
51327
51617
|
const [selectedSheetData, setSelectedSheetData] = useState([[EmptyRow]]);
|
|
51618
|
+
let pageRef = useRef('');
|
|
51328
51619
|
const sheetRef = useRef(null);
|
|
51329
|
-
const excelDataCopy = useRef({
|
|
51330
|
-
defaultSheet: [[]]
|
|
51331
|
-
});
|
|
51332
51620
|
let checkVal = val => {
|
|
51333
51621
|
if (val === undefined || val === null) {
|
|
51334
51622
|
return null;
|
|
@@ -51338,10 +51626,9 @@ const ExcelFile = ({
|
|
|
51338
51626
|
useEffect(() => {
|
|
51339
51627
|
const payload = excelData;
|
|
51340
51628
|
const sheetNames = payload.sheets.map(e => e.sheetName);
|
|
51341
|
-
|
|
51342
|
-
sheetNames
|
|
51343
|
-
});
|
|
51629
|
+
setSheetNames(sheetNames);
|
|
51344
51630
|
if (sheetNames.length > 0) {
|
|
51631
|
+
pageRef.current = sheetNames[0] ? sheetNames[0] : '';
|
|
51345
51632
|
setSelectedSheet({
|
|
51346
51633
|
name: sheetNames[0] ? sheetNames[0] : '',
|
|
51347
51634
|
index: 0
|
|
@@ -51351,8 +51638,8 @@ const ExcelFile = ({
|
|
|
51351
51638
|
payload.sheets.forEach(sheet => {
|
|
51352
51639
|
const sheetName = sheet.sheetName;
|
|
51353
51640
|
const json = sheet.data;
|
|
51354
|
-
const maxRows = Math.max(
|
|
51355
|
-
const maxCols = Math.max(
|
|
51641
|
+
const maxRows = Math.max(15, json.length + 2);
|
|
51642
|
+
const maxCols = Math.max(15, Math.max(...json.map(row => row.length)) + 2);
|
|
51356
51643
|
let spreadsheetData = Array.from({
|
|
51357
51644
|
length: maxRows
|
|
51358
51645
|
}, () => Array.from({
|
|
@@ -51374,63 +51661,187 @@ const ExcelFile = ({
|
|
|
51374
51661
|
});
|
|
51375
51662
|
newWorksheetsData[sheetName] = spreadsheetData;
|
|
51376
51663
|
});
|
|
51377
|
-
excelDataCopy.current = newWorksheetsData;
|
|
51378
51664
|
setWorksheetsData(newWorksheetsData);
|
|
51379
51665
|
const firstSheetName = Object.keys(newWorksheetsData)[0];
|
|
51380
51666
|
if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
|
|
51381
51667
|
setSelectedSheetData(newWorksheetsData[firstSheetName]);
|
|
51382
51668
|
}
|
|
51383
51669
|
}, []);
|
|
51384
|
-
const
|
|
51385
|
-
|
|
51386
|
-
|
|
51387
|
-
|
|
51388
|
-
|
|
51389
|
-
|
|
51390
|
-
|
|
51391
|
-
|
|
51392
|
-
|
|
51393
|
-
|
|
51394
|
-
|
|
51395
|
-
|
|
51396
|
-
|
|
51397
|
-
|
|
51398
|
-
|
|
51399
|
-
|
|
51670
|
+
const onEvaluateChange = data => {
|
|
51671
|
+
setWorksheetsData(prev => ({
|
|
51672
|
+
...prev,
|
|
51673
|
+
[pageRef.current]: data
|
|
51674
|
+
}));
|
|
51675
|
+
onSave();
|
|
51676
|
+
};
|
|
51677
|
+
const [editingSheet, setEditingSheet] = useState(null);
|
|
51678
|
+
const handleAddSheet = () => {
|
|
51679
|
+
const generateUniqueSheetName = (baseName, existingNames) => {
|
|
51680
|
+
let newName = baseName;
|
|
51681
|
+
let counter = 1;
|
|
51682
|
+
while (existingNames.includes(newName)) {
|
|
51683
|
+
newName = `${baseName}${counter}`;
|
|
51684
|
+
counter++;
|
|
51685
|
+
}
|
|
51686
|
+
return newName;
|
|
51687
|
+
};
|
|
51688
|
+
const baseName = 'NewSheet';
|
|
51689
|
+
const existingSheetNames = sheetNames;
|
|
51690
|
+
const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
|
|
51691
|
+
const newSheetData = Array.from({
|
|
51692
|
+
length: 15
|
|
51693
|
+
}, () => Array.from({
|
|
51694
|
+
length: 15
|
|
51695
|
+
}, () => EmptyRow));
|
|
51696
|
+
setSheetNames(prev => [...prev, newSheetName]);
|
|
51697
|
+
setSelectedSheet({
|
|
51698
|
+
index: sheetNames?.length,
|
|
51699
|
+
name: newSheetName
|
|
51700
|
+
});
|
|
51701
|
+
setWorksheetsData({
|
|
51702
|
+
...worksheetsData,
|
|
51703
|
+
[newSheetName]: newSheetData
|
|
51704
|
+
});
|
|
51705
|
+
setSelectedSheetData(newSheetData);
|
|
51706
|
+
pageRef.current = newSheetName;
|
|
51707
|
+
};
|
|
51708
|
+
const handleNameChange = (event, index, name) => {
|
|
51709
|
+
const target = event.target;
|
|
51710
|
+
if (!target) {
|
|
51711
|
+
setEditingSheet(null);
|
|
51712
|
+
return;
|
|
51713
|
+
}
|
|
51714
|
+
const updatedSheetValue = target.textContent?.trim();
|
|
51715
|
+
if (!updatedSheetValue) {
|
|
51716
|
+
toast.warning('Sheet name cannot be empty.');
|
|
51717
|
+
target.textContent = selectedSheet.name;
|
|
51718
|
+
setEditingSheet(null);
|
|
51719
|
+
return;
|
|
51720
|
+
}
|
|
51721
|
+
if (updatedSheetValue.length > 30) {
|
|
51722
|
+
toast.warning('The sheet name cannot be greater than 30 characters');
|
|
51723
|
+
target.textContent = selectedSheet.name;
|
|
51724
|
+
setEditingSheet(null);
|
|
51725
|
+
return;
|
|
51726
|
+
}
|
|
51727
|
+
if (sheetNames.includes(updatedSheetValue) && sheetNames[index] !== updatedSheetValue) {
|
|
51728
|
+
toast.warning('Sheet name already exists');
|
|
51729
|
+
target.textContent = selectedSheet.name;
|
|
51730
|
+
setEditingSheet(null);
|
|
51731
|
+
return;
|
|
51400
51732
|
}
|
|
51733
|
+
let updatedSheetNames = sheetNames;
|
|
51734
|
+
updatedSheetNames.splice(index, 1, updatedSheetValue);
|
|
51735
|
+
let remainingSheets = worksheetsData;
|
|
51736
|
+
let updatedData = replaceKeyValueByKeyName(remainingSheets, name, updatedSheetValue, selectedSheetData);
|
|
51737
|
+
pageRef.current = updatedSheetValue;
|
|
51738
|
+
setSelectedSheet(prev => ({
|
|
51739
|
+
...prev,
|
|
51740
|
+
name: updatedSheetValue
|
|
51741
|
+
}));
|
|
51742
|
+
setWorksheetsData(updatedData);
|
|
51743
|
+
setEditingSheet(null);
|
|
51401
51744
|
};
|
|
51402
|
-
|
|
51403
|
-
|
|
51404
|
-
|
|
51405
|
-
|
|
51406
|
-
|
|
51407
|
-
|
|
51745
|
+
function replaceKeyValueByKeyName(obj, oldKey, newKey, newValue) {
|
|
51746
|
+
if (!(oldKey in obj)) {
|
|
51747
|
+
throw new Error(`Key "${oldKey}" not found in object`);
|
|
51748
|
+
}
|
|
51749
|
+
delete obj[oldKey];
|
|
51750
|
+
obj[newKey] = newValue;
|
|
51751
|
+
return obj;
|
|
51752
|
+
}
|
|
51408
51753
|
const handleSheetChange = (name, index) => {
|
|
51409
51754
|
setSelectedSheet({
|
|
51410
51755
|
index,
|
|
51411
51756
|
name
|
|
51412
51757
|
});
|
|
51758
|
+
setSheetNames(prev => {
|
|
51759
|
+
const updatedSheetNames = [...prev];
|
|
51760
|
+
updatedSheetNames[index] = name;
|
|
51761
|
+
return updatedSheetNames;
|
|
51762
|
+
});
|
|
51763
|
+
const selectedSheetData = worksheetsData[name];
|
|
51764
|
+
if (selectedSheetData) {
|
|
51765
|
+
setSelectedSheetData(selectedSheetData);
|
|
51766
|
+
} else {
|
|
51767
|
+
setSelectedSheetData([[EmptyRow]]);
|
|
51768
|
+
}
|
|
51769
|
+
pageRef.current = name;
|
|
51413
51770
|
};
|
|
51414
|
-
|
|
51771
|
+
const setCursorToEnd = element => {
|
|
51772
|
+
const range = document.createRange();
|
|
51773
|
+
const selection = window.getSelection();
|
|
51774
|
+
range.selectNodeContents(element);
|
|
51775
|
+
range.collapse(false);
|
|
51776
|
+
selection?.removeAllRanges();
|
|
51777
|
+
selection?.addRange(range);
|
|
51778
|
+
};
|
|
51779
|
+
return jsxs("div", {
|
|
51415
51780
|
className: "excel-page",
|
|
51416
|
-
children:
|
|
51781
|
+
children: [sheetNames.length > 0 && jsxs("div", {
|
|
51417
51782
|
className: "excel-book",
|
|
51418
51783
|
children: [jsx("div", {
|
|
51419
51784
|
ref: sheetRef,
|
|
51420
51785
|
className: "excel-sheet",
|
|
51421
51786
|
children: jsx(Spreadsheet, {
|
|
51422
|
-
data: selectedSheetData
|
|
51787
|
+
data: selectedSheetData,
|
|
51788
|
+
onEvaluatedDataChange: onEvaluateChange
|
|
51423
51789
|
})
|
|
51424
|
-
}),
|
|
51425
|
-
|
|
51426
|
-
|
|
51427
|
-
|
|
51790
|
+
}), jsxs(Row$1, {
|
|
51791
|
+
className: "sheet-bar",
|
|
51792
|
+
children: [jsx(Col, {
|
|
51793
|
+
size: 0,
|
|
51794
|
+
className: "add-sheet-icon",
|
|
51795
|
+
children: jsx(Tooltip, {
|
|
51796
|
+
title: "Add Sheet",
|
|
51797
|
+
placement: "top",
|
|
51798
|
+
children: jsx(Icon, {
|
|
51799
|
+
className: "cursor-pointer ml-1",
|
|
51800
|
+
hoverEffect: true,
|
|
51801
|
+
onClick: () => {
|
|
51802
|
+
handleAddSheet();
|
|
51803
|
+
},
|
|
51804
|
+
name: "plus_icon",
|
|
51805
|
+
height: 20,
|
|
51806
|
+
width: 20
|
|
51807
|
+
})
|
|
51808
|
+
})
|
|
51809
|
+
}), jsx(Col, {
|
|
51810
|
+
size: 10,
|
|
51811
|
+
children: jsx("div", {
|
|
51812
|
+
className: "excel-tab-container",
|
|
51813
|
+
children: sheetNames.map((name, index) => jsx("div", {
|
|
51814
|
+
className: `excel-tab-list ${name === selectedSheet.name ? 'active' : ''}`,
|
|
51815
|
+
onClick: () => {
|
|
51816
|
+
handleSheetChange(name, index);
|
|
51817
|
+
},
|
|
51818
|
+
suppressContentEditableWarning: editingSheet === index,
|
|
51819
|
+
onDoubleClick: e => {
|
|
51820
|
+
setEditingSheet(index);
|
|
51821
|
+
if (editingSheet === null) {
|
|
51822
|
+
setTimeout(() => setCursorToEnd(e.target), 0);
|
|
51823
|
+
}
|
|
51824
|
+
},
|
|
51825
|
+
contentEditable: editingSheet === index,
|
|
51826
|
+
onBlur: e => {
|
|
51827
|
+
handleNameChange(e, index, name);
|
|
51828
|
+
},
|
|
51829
|
+
onKeyDown: e => {
|
|
51830
|
+
if (e.key === 'Enter') {
|
|
51831
|
+
e.preventDefault();
|
|
51832
|
+
handleNameChange(e, index, name);
|
|
51833
|
+
}
|
|
51834
|
+
},
|
|
51835
|
+
children: name
|
|
51836
|
+
}, name))
|
|
51837
|
+
})
|
|
51838
|
+
})]
|
|
51428
51839
|
})]
|
|
51429
|
-
})
|
|
51840
|
+
}), jsx(Toastify, {})]
|
|
51430
51841
|
});
|
|
51431
51842
|
};
|
|
51432
51843
|
|
|
51433
|
-
var css_248z = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\"
|
|
51844
|
+
var css_248z = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-Module-chip {\n width: 75px;\n height: 32px;\n border: 0.5px solid;\n border-radius: 16px;\n color: var(--brand-color);\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-Module-chip .ff-Module-label-chip--active {\n color: var(--ff-header-text-color);\n}\n.ff-Module-chip--active {\n background: var(--brand-color);\n}";
|
|
51434
51845
|
styleInject(css_248z);
|
|
51435
51846
|
|
|
51436
51847
|
const ModuleChip = ({
|
|
@@ -51439,13 +51850,13 @@ const ModuleChip = ({
|
|
|
51439
51850
|
onClick = () => {}
|
|
51440
51851
|
}) => {
|
|
51441
51852
|
return jsx("div", {
|
|
51442
|
-
className: classNames('ff-
|
|
51443
|
-
'ff-
|
|
51853
|
+
className: classNames('ff-Module-chip', {
|
|
51854
|
+
'ff-Module-chip--active': isActive
|
|
51444
51855
|
}),
|
|
51445
51856
|
onClick: onClick,
|
|
51446
51857
|
children: jsx("div", {
|
|
51447
|
-
className: classNames(`ff-label-chip `, {
|
|
51448
|
-
'ff-label-chip--active': isActive
|
|
51858
|
+
className: classNames(`ff-Module-label-chip `, {
|
|
51859
|
+
'ff-Module-label-chip--active': isActive
|
|
51449
51860
|
}),
|
|
51450
51861
|
children: jsx(Typography, {
|
|
51451
51862
|
fontSize: '14px',
|
|
@@ -56804,5 +57215,23 @@ const throttle = (func, limit) => {
|
|
|
56804
57215
|
return throttled;
|
|
56805
57216
|
};
|
|
56806
57217
|
|
|
56807
|
-
|
|
57218
|
+
const getSequentialPayload = (machineInstances = []) => {
|
|
57219
|
+
return machineInstances.flatMap(machineInstance => machineInstance.runLevelExecutionDataSets.map(runLevelExecutionDataSet => ({
|
|
57220
|
+
id: machineInstance.id,
|
|
57221
|
+
clientId: machineInstance.clientId,
|
|
57222
|
+
numberOfRuns: machineInstance.numberOfRuns,
|
|
57223
|
+
executionEnv: machineInstance.executionEnv,
|
|
57224
|
+
browserName: machineInstance.browserName,
|
|
57225
|
+
browserVersion: machineInstance.browserVersion,
|
|
57226
|
+
systemUrl: machineInstance.systemUrl,
|
|
57227
|
+
machineInfo: machineInstance.machineInfo,
|
|
57228
|
+
deviceInfo: machineInstance.deviceInfo,
|
|
57229
|
+
headless: machineInstance.headless,
|
|
57230
|
+
peVariableSetId: runLevelExecutionDataSet.peVariableSetId,
|
|
57231
|
+
globalVariableSetId: runLevelExecutionDataSet.globalVariableSetId,
|
|
57232
|
+
testDataSetId: runLevelExecutionDataSet.testDataSetId
|
|
57233
|
+
})));
|
|
57234
|
+
};
|
|
57235
|
+
|
|
57236
|
+
export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachmentButton, Button$1 as Button, Checkbox, Chip, Col, Container, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DragAndDrop, Drawer, ExcelFile as Excel, ExpandableMenu, FileDropzone, Forms as Form, HighlightText, Icon, IconButton, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, LazyLoad, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiSelect, NlpInput as NLPInput, Paper, PieChart, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, Table$1 as Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, Tooltip, Typography, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, throttle, toast, truncateText, useTheme };
|
|
56808
57237
|
//# sourceMappingURL=index.esm.js.map
|