pixel-react 1.1.1 → 1.1.2
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/Charts/DashboardDonutChart/DashboardDonutChart.d.ts +5 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DashboardDonutChart/index.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +21 -0
- package/lib/components/Charts/PieChart/PieChart.d.ts +5 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/PieChart/index.d.ts +1 -0
- package/lib/components/Charts/PieChart/types.d.ts +27 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -1
- package/lib/components/NLPInput/NlpInput.d.ts +4 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +19 -0
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +4 -0
- package/lib/components/NLPInput/index.d.ts +1 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/index.d.ts +73 -18
- package/lib/index.esm.js +1412 -774
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1414 -773
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getEncryptedData/getEncryptedData.d.ts +2 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/package.json +2 -1
- package/src/StyleGuide/ColorPalette/ColorPalette.tsx +2 -4
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +95 -20
- package/src/assets/Themes/BaseTheme.scss +2 -3
- package/src/assets/Themes/DarkTheme.scss +9 -8
- package/src/assets/icons/wswb_delete_icon.svg +4 -0
- package/src/assets/icons/wswb_plus_icon.svg +5 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +145 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +52 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +335 -0
- package/src/components/Charts/DashboardDonutChart/index.ts +1 -0
- package/src/components/Charts/DashboardDonutChart/types.ts +33 -0
- package/src/components/Charts/PieChart/PieChart.scss +39 -0
- package/src/components/Charts/PieChart/PieChart.stories.tsx +46 -0
- package/src/components/Charts/PieChart/PieChart.tsx +193 -0
- package/src/components/Charts/PieChart/index.ts +1 -0
- package/src/components/Charts/PieChart/types.ts +28 -0
- package/src/components/Icon/iconList.ts +6 -0
- package/src/components/Modal/modal.scss +1 -1
- package/src/components/MultiSelect/MultiSelect.stories.tsx +2 -3
- package/src/components/MultiSelect/MultiSelect.tsx +35 -23
- package/src/components/MultiSelect/MultiSelectTypes.ts +1 -1
- package/src/components/NLPInput/NLPInput.scss +246 -0
- package/src/components/NLPInput/NlpInput.stories.tsx +136 -0
- package/src/components/NLPInput/NlpInput.tsx +374 -0
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +60 -0
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +83 -0
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +180 -0
- package/src/components/NLPInput/index.ts +1 -0
- package/src/components/NLPInput/type.tsx +124 -0
- package/src/components/Table/Table.scss +5 -0
- package/src/components/Table/Table.stories.tsx +12 -0
- package/src/components/Table/Table.tsx +25 -14
- package/src/components/TextArea/Textarea.scss +1 -1
- package/src/index.ts +6 -1
- package/src/utils/getEncryptedData/getEncryptedData.stories.tsx +55 -0
- package/src/utils/getEncryptedData/getEncryptedData.ts +10 -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/index.js
CHANGED
|
@@ -48,11 +48,11 @@ function styleInject(css, ref) {
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
var css_248z$
|
|
52
|
-
styleInject(css_248z$
|
|
51
|
+
var css_248z$L = ":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}\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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\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-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--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}\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}";
|
|
52
|
+
styleInject(css_248z$L);
|
|
53
53
|
|
|
54
|
-
var css_248z$
|
|
55
|
-
styleInject(css_248z$
|
|
54
|
+
var css_248z$K = ":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}";
|
|
55
|
+
styleInject(css_248z$K);
|
|
56
56
|
|
|
57
57
|
function getDefaultExportFromCjs (x) {
|
|
58
58
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -255,6 +255,10 @@ const SvgSwitchLicenseIcon = (props) => /* @__PURE__ */ React__namespace.createE
|
|
|
255
255
|
|
|
256
256
|
const SvgFireflinkLogo = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 238 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M61.4537 17.8485V22.8928H71.6263V27.9317H61.4537V35.7966H54.8828V12.8096H72.9844V17.8485H61.4537Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M76.4541 12.8095H83.025V35.6658H76.4541V12.8095Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M97.9099 29.6458H94.3082V35.6685H87.7373V12.8095H98.2755C104.599 12.8095 108.566 16.0035 108.566 21.2876C108.631 22.7986 108.242 24.2947 107.447 25.5858C106.653 26.877 105.489 27.905 104.104 28.5394L109.053 35.6658H102.119L97.9099 29.6458ZM98.0336 17.8484H94.4319V24.4843H98.0281C100.755 24.4843 102.119 23.2552 102.119 21.165C101.995 19.2001 100.755 17.8484 98.0281 17.8484H98.0336Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M131.006 30.6296V35.6685H112.533V12.8095H130.635V17.8484H118.98V21.6637H129.271V26.4573H118.98V30.6351L131.006 30.6296Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M141.421 17.8484V22.8928H151.593V27.9317H141.421V35.7966H134.85V12.8095H152.951V17.8484H141.421Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M156.298 12.8095H162.869V30.507H173.894V35.6685H156.413V12.8095H156.298Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M176.752 12.8095H183.323V35.6658H176.752V12.8095Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M210.104 12.8095V35.6658H204.773L194.601 23.5005V35.6658H188.159V12.8095H193.49L203.663 24.9748V12.8095H210.104Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M223.866 27.4329L221.391 30.0137V35.7884H214.938V12.8095H221.386V22.2714L230.313 12.8095H237.502L228.08 22.8928L238 35.6739H230.436L223.866 27.4329Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.7502 4.88842C16.1316 5.25632 15.6341 5.50162 15.1392 5.74961C13.2807 6.7334 11.5431 7.59181 9.68453 8.5756C9.5558 8.64839 9.45159 8.75748 9.3855 8.88897C9.31942 9.02047 9.29442 9.16842 9.31335 9.31412V46.5486C9.31335 47.0391 9.18969 47.4097 8.69481 47.5323C7.77434 47.9098 6.7758 48.0623 5.78338 47.9769C4.79096 47.8916 3.83353 47.5709 2.99243 47.0418C2.37431 46.6111 1.84823 46.0636 1.44391 45.4309C1.0396 44.7982 0.765171 44.0926 0.636432 43.3546C0.327663 41.3625 0.203398 39.3465 0.265245 37.3319C0.141525 27.4994 0.0178993 17.547 0.0178993 7.7145C-0.0791099 6.15032 0.219297 4.58688 0.886463 3.16613C1.44789 1.9794 2.41841 1.03032 3.62304 0.489747C4.82768 -0.050828 6.18734 -0.147392 7.45741 0.217461C9.21628 0.744425 10.8848 1.5318 12.4063 2.55294C13.781 3.29147 15.1337 4.0273 16.3736 4.76583C16.5028 4.64047 16.6265 4.76306 16.7502 4.88842Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.9984 42.736V32.0423C16.9942 31.8984 17.026 31.7558 17.0907 31.6269C17.1555 31.4981 17.2512 31.3871 17.3696 31.3038C21.5843 28.9683 25.7989 26.6328 29.8926 24.3001C31.0089 23.6869 32.1253 23.071 33.3625 22.3324C32.6455 21.8761 31.8998 21.4656 31.13 21.1034C29.2715 19.997 27.41 19.0132 25.5515 17.9095C25.46 17.8474 25.3516 17.8141 25.2407 17.8141C25.1298 17.8141 25.0218 17.8474 24.9303 17.9095C22.5741 19.3838 20.3443 20.7354 17.9881 22.2098C17.8644 22.2098 17.8645 22.3324 17.7408 22.3324V14.4676C17.7361 14.3059 17.7667 14.1452 17.8307 13.9965C17.8948 13.8478 17.9909 13.7147 18.112 13.6064C20.2207 12.132 22.3267 10.7803 24.3117 9.306C24.4263 9.24517 24.5543 9.21335 24.6843 9.21335C24.8142 9.21335 24.9422 9.24517 25.0568 9.306C27.9079 10.903 30.8853 12.6253 33.7364 14.2113C35.7187 15.3177 37.7036 16.4242 39.8096 17.5279C41.3189 18.3064 42.568 19.502 43.4057 20.9698C43.934 21.9245 44.1462 23.0195 44.0125 24.1002C43.8788 25.1809 43.406 26.1927 42.6607 26.9925C41.681 28.0979 40.5036 29.0144 39.1881 29.6959C36.337 31.2929 33.6099 33.0152 30.7588 34.6013C27.1627 36.6915 23.6929 38.6563 20.0968 40.7466C18.9806 41.5069 17.9909 42.1255 16.9984 42.736Z", fill: "currentColor" }));
|
|
257
257
|
|
|
258
|
+
const SvgWswbDeleteIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.77783 17.4447C7.77783 17.8571 7.94168 18.2527 8.23333 18.5443C8.52498 18.836 8.92054 18.9998 9.333 18.9998H15.556C15.9685 18.9998 16.364 18.836 16.6557 18.5443C16.9473 18.2527 17.1112 17.8571 17.1112 17.4447V8.11133H7.77783V17.4447Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M15.1667 5.77817L14.3897 5H10.5L9.723 5.77817H7V7.33333H17.8885V5.77817H15.1667Z", fill: "currentColor" }));
|
|
259
|
+
|
|
260
|
+
const SvgWswbPlusIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { opacity: 0.4 }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.25 5.25C12.6796 5.25 13.0278 5.59822 13.0278 6.02778V11.4722H18.4722C18.9018 11.4722 19.25 11.8204 19.25 12.25C19.25 12.6796 18.9018 13.0278 18.4722 13.0278H13.0278V18.4722C13.0278 18.9018 12.6796 19.25 12.25 19.25C11.8204 19.25 11.4722 18.9018 11.4722 18.4722V13.0278H6.02778C5.59822 13.0278 5.25 12.6796 5.25 12.25C5.25 11.8204 5.59822 11.4722 6.02778 11.4722H11.4722V6.02778C11.4722 5.59822 11.8204 5.25 12.25 5.25Z", fill: "currentColor" })));
|
|
261
|
+
|
|
258
262
|
let Components = {};
|
|
259
263
|
//icons
|
|
260
264
|
Components['delete_info'] = SvgDeleteInfo;
|
|
@@ -320,9 +324,11 @@ Components['all_projects'] = SvgAllProjects;
|
|
|
320
324
|
Components['android_icon'] = SvgAndroidIcon;
|
|
321
325
|
Components['select_license'] = SvgSwitchLicenseIcon;
|
|
322
326
|
Components['fireflink-logo'] = SvgFireflinkLogo;
|
|
327
|
+
Components['wswb_delete_icon'] = SvgWswbDeleteIcon;
|
|
328
|
+
Components['wswb_plus_icon'] = SvgWswbPlusIcon;
|
|
323
329
|
|
|
324
|
-
var css_248z$
|
|
325
|
-
styleInject(css_248z$
|
|
330
|
+
var css_248z$J = ".ff-icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ff-icon-click {\n cursor: pointer;\n padding: 5px;\n box-sizing: content-box;\n}\n.ff-icon-click:hover {\n border-radius: 50%;\n background-color: var(--drawer-footer-bg);\n box-shadow: 0px 0px 16px var(--toggle-strip-shadow);\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}";
|
|
331
|
+
styleInject(css_248z$J);
|
|
326
332
|
|
|
327
333
|
const Icon = ({
|
|
328
334
|
name,
|
|
@@ -404,8 +410,8 @@ const Button$1 = /*#__PURE__*/React.forwardRef(({
|
|
|
404
410
|
});
|
|
405
411
|
});
|
|
406
412
|
|
|
407
|
-
var css_248z$
|
|
408
|
-
styleInject(css_248z$
|
|
413
|
+
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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\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-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 height: 100vh;\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\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: 2px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 10px 8px 10px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 2px 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-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\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: 12px;\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 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: 6px;\n padding: 6px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n height: calc(100vh - 76px);\n overflow: hidden auto;\n}\n.ff-drawer-container .ff-drawer .no-footer {\n height: 100vh;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 5px 16px 5px 16px;\n display: flex;\n justify-content: space-between;\n border-top: 2px solid var(--drawer-footer-border);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 16px;\n}";
|
|
414
|
+
styleInject(css_248z$I);
|
|
409
415
|
|
|
410
416
|
function useEscapeKey(key) {
|
|
411
417
|
return callBack => {
|
|
@@ -424,8 +430,8 @@ function useEscapeKey(key) {
|
|
|
424
430
|
};
|
|
425
431
|
}
|
|
426
432
|
|
|
427
|
-
var css_248z$D = ":root {\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 --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-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-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 --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}\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 --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-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-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 --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}\n\n.ff-light-theme {\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 --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-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-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 --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}\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 --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-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-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 --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}";
|
|
428
|
-
styleInject(css_248z$
|
|
433
|
+
var css_248z$H = ":root {\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 --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-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-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 --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}\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 --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-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-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 --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}\n\n.ff-light-theme {\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 --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-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-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 --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}\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 --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-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-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 --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}";
|
|
434
|
+
styleInject(css_248z$H);
|
|
429
435
|
|
|
430
436
|
const ThemeContext = /*#__PURE__*/React.createContext(undefined);
|
|
431
437
|
const ThemeProvider = ({
|
|
@@ -585,14 +591,14 @@ const Drawer = ({
|
|
|
585
591
|
}), document.body);
|
|
586
592
|
};
|
|
587
593
|
|
|
588
|
-
var css_248z$
|
|
589
|
-
styleInject(css_248z$
|
|
594
|
+
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\", 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-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}";
|
|
595
|
+
styleInject(css_248z$G);
|
|
590
596
|
|
|
591
|
-
var css_248z$
|
|
592
|
-
styleInject(css_248z$
|
|
597
|
+
var css_248z$F = "";
|
|
598
|
+
styleInject(css_248z$F);
|
|
593
599
|
|
|
594
|
-
var css_248z$
|
|
595
|
-
styleInject(css_248z$
|
|
600
|
+
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\", 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}";
|
|
601
|
+
styleInject(css_248z$E);
|
|
596
602
|
|
|
597
603
|
const checkEmpty = value => {
|
|
598
604
|
// Check for null or undefined
|
|
@@ -761,8 +767,8 @@ const Tooltip = ({
|
|
|
761
767
|
});
|
|
762
768
|
};
|
|
763
769
|
|
|
764
|
-
var css_248z$
|
|
765
|
-
styleInject(css_248z$
|
|
770
|
+
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.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}";
|
|
771
|
+
styleInject(css_248z$D);
|
|
766
772
|
|
|
767
773
|
const Typography = ({
|
|
768
774
|
fontWeight = 'regular',
|
|
@@ -847,8 +853,8 @@ const Accordion = ({
|
|
|
847
853
|
});
|
|
848
854
|
};
|
|
849
855
|
|
|
850
|
-
var css_248z$
|
|
851
|
-
styleInject(css_248z$
|
|
856
|
+
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, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-more-chip {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-wrapper .ff-multiselect__main .default-label {\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-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-wrapper .error-text {\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-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: 8px;\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: 6px;\n border: none;\n border-radius: 8px;\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 .active-default-label {\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-close-icon {\n cursor: pointer;\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__main .ff-multiselect-chip-container .ff-multiselect-more-chip {\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}";
|
|
857
|
+
styleInject(css_248z$C);
|
|
852
858
|
|
|
853
859
|
const dropdownDefaultCSSData$1 = {
|
|
854
860
|
verticalMargin: 4,
|
|
@@ -856,8 +862,8 @@ const dropdownDefaultCSSData$1 = {
|
|
|
856
862
|
maxDropdownHeight: 160
|
|
857
863
|
};
|
|
858
864
|
|
|
859
|
-
var css_248z$
|
|
860
|
-
styleInject(css_248z$
|
|
865
|
+
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, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\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-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}";
|
|
866
|
+
styleInject(css_248z$B);
|
|
861
867
|
|
|
862
868
|
const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
|
|
863
869
|
options,
|
|
@@ -953,8 +959,8 @@ const ChipElement = ({
|
|
|
953
959
|
return null;
|
|
954
960
|
};
|
|
955
961
|
const MultiSelect = ({
|
|
956
|
-
options,
|
|
957
|
-
type =
|
|
962
|
+
options = [],
|
|
963
|
+
type = 'text',
|
|
958
964
|
selectedOptions = [],
|
|
959
965
|
onChange = () => {},
|
|
960
966
|
acceptNewOption = false,
|
|
@@ -1020,13 +1026,13 @@ const MultiSelect = ({
|
|
|
1020
1026
|
handleOptionChange(option, false);
|
|
1021
1027
|
};
|
|
1022
1028
|
const handleKeyEnter = e => {
|
|
1023
|
-
if (acceptNewOption && e.key ===
|
|
1029
|
+
if (acceptNewOption && e.key === 'Enter') {
|
|
1024
1030
|
setInputError('');
|
|
1025
|
-
if (type ===
|
|
1031
|
+
if (type === 'email') {
|
|
1026
1032
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
1027
1033
|
if (!emailPattern.test(searchedKeyword)) {
|
|
1028
1034
|
setIsOpen(false);
|
|
1029
|
-
setInputError(
|
|
1035
|
+
setInputError('Please enter a valid email address.');
|
|
1030
1036
|
return;
|
|
1031
1037
|
}
|
|
1032
1038
|
}
|
|
@@ -1058,6 +1064,15 @@ const MultiSelect = ({
|
|
|
1058
1064
|
});
|
|
1059
1065
|
}
|
|
1060
1066
|
};
|
|
1067
|
+
const handleSearch = e => {
|
|
1068
|
+
if (!isOpen) {
|
|
1069
|
+
setIsOpen(true);
|
|
1070
|
+
}
|
|
1071
|
+
const input = e.target.value;
|
|
1072
|
+
setSearchedKeyword(input);
|
|
1073
|
+
const filteredOptions = options.filter(option => option.value?.toLowerCase().includes(input.toLowerCase()));
|
|
1074
|
+
onSearch?.(input, filteredOptions.length);
|
|
1075
|
+
};
|
|
1061
1076
|
React.useEffect(() => {
|
|
1062
1077
|
if (isOpen) {
|
|
1063
1078
|
calculatePosition();
|
|
@@ -1141,13 +1156,7 @@ const MultiSelect = ({
|
|
|
1141
1156
|
autoComplete: "off",
|
|
1142
1157
|
placeholder: "search...",
|
|
1143
1158
|
ref: inputRef,
|
|
1144
|
-
onChange:
|
|
1145
|
-
if (!isOpen) {
|
|
1146
|
-
setIsOpen(true);
|
|
1147
|
-
}
|
|
1148
|
-
setSearchedKeyword(e.target.value);
|
|
1149
|
-
onSearch?.(e.target.value);
|
|
1150
|
-
},
|
|
1159
|
+
onChange: handleSearch,
|
|
1151
1160
|
onKeyDown: handleKeyEnter,
|
|
1152
1161
|
id: "input-ele",
|
|
1153
1162
|
className: "ff-select-input",
|
|
@@ -1193,8 +1202,8 @@ const MultiSelect = ({
|
|
|
1193
1202
|
});
|
|
1194
1203
|
};
|
|
1195
1204
|
|
|
1196
|
-
var css_248z$
|
|
1197
|
-
styleInject(css_248z$
|
|
1205
|
+
var css_248z$A = "@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-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}";
|
|
1206
|
+
styleInject(css_248z$A);
|
|
1198
1207
|
|
|
1199
1208
|
const Toaster = ({
|
|
1200
1209
|
isOpen = false,
|
|
@@ -1302,8 +1311,8 @@ const Toaster = ({
|
|
|
1302
1311
|
}), document.body);
|
|
1303
1312
|
};
|
|
1304
1313
|
|
|
1305
|
-
var css_248z$
|
|
1306
|
-
styleInject(css_248z$
|
|
1314
|
+
var css_248z$z = "/* Container */\n.ff-container {\n margin-right: auto;\n margin-left: auto;\n width: 90%;\n display: grid;\n}\n\n.ff-container-fluid {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n display: grid;\n}\n\n/* Row */\n.ff-row {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n grid-column: span 12;\n}\n\n.ff-col-1 {\n grid-column: span 1;\n}\n\n.ff-col-2 {\n grid-column: span 2;\n}\n\n.ff-col-3 {\n grid-column: span 3;\n}\n\n.ff-col-4 {\n grid-column: span 4;\n}\n\n.ff-col-5 {\n grid-column: span 5;\n}\n\n.ff-col-6 {\n grid-column: span 6;\n}\n\n.ff-col-7 {\n grid-column: span 7;\n}\n\n.ff-col-8 {\n grid-column: span 8;\n}\n\n.ff-col-9 {\n grid-column: span 9;\n}\n\n.ff-col-10 {\n grid-column: span 10;\n}\n\n.ff-col-11 {\n grid-column: span 11;\n}\n\n.ff-col-12 {\n grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n /* Stacking columns on small screens */\n .ff-col {\n grid-column: span 12;\n }\n}";
|
|
1315
|
+
styleInject(css_248z$z);
|
|
1307
1316
|
|
|
1308
1317
|
const Container = ({
|
|
1309
1318
|
children,
|
|
@@ -1345,8 +1354,8 @@ const Col = ({
|
|
|
1345
1354
|
});
|
|
1346
1355
|
};
|
|
1347
1356
|
|
|
1348
|
-
var css_248z$
|
|
1349
|
-
styleInject(css_248z$
|
|
1357
|
+
var css_248z$y = ".ff--switch-container {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n height: 0;\n width: 0;\n display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n right: -1px;\n border: 1px solid var(--brand-color);\n background: var(--toggle-button-bg-color);\n transition: all 0.3s;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n background: var(--brand-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n cursor: default;\n color: var(--disable-color);\n background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n border-radius: 8px;\n position: relative;\n background: var(--toggle-strip-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n position: absolute;\n left: 0;\n border: 1px solid var(--toggle-strip-color);\n display: flex;\n background: var(--toggle-button-bg-color);\n border-radius: 50%;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n transition: all 0.3s;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n width: 24px;\n height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n width: 16px;\n height: 16px;\n transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n width: 32px;\n height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n width: 20px;\n height: 20px;\n transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n width: 40px;\n height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n width: 24px;\n height: 24px;\n transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n transform: translateX(16px);\n}";
|
|
1358
|
+
styleInject(css_248z$y);
|
|
1350
1359
|
|
|
1351
1360
|
const Toggle = ({
|
|
1352
1361
|
onChange,
|
|
@@ -1424,8 +1433,8 @@ const Toggle = ({
|
|
|
1424
1433
|
});
|
|
1425
1434
|
};
|
|
1426
1435
|
|
|
1427
|
-
var css_248z$
|
|
1428
|
-
styleInject(css_248z$
|
|
1436
|
+
var css_248z$x = ":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}\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-chip-wrapper .ff-default-chip-style {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\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-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 3px 0px #575757 inset, -1px -1px 2px 0px #ffffff inset, 1px -1px 2px 0px #575757 inset, -1px -1px 2px 0px #575757, 1px 1px 2px 0px #ffffff;\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n box-shadow: 1px 1px 6px 0px #575757 inset, -1px -1px 4px 0px #ffffff inset;\n padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n background-color: #f9d5ff;\n color: #ffffff;\n color: #1e161f;\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n background-color: #079455;\n color: #ffffff;\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n background-color: #e42525;\n color: #ffffff;\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n background-color: #f79009;\n color: #ffffff;\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}";
|
|
1437
|
+
styleInject(css_248z$x);
|
|
1429
1438
|
|
|
1430
1439
|
const Chip = ({
|
|
1431
1440
|
label = '',
|
|
@@ -1454,8 +1463,8 @@ const Chip = ({
|
|
|
1454
1463
|
});
|
|
1455
1464
|
};
|
|
1456
1465
|
|
|
1457
|
-
var css_248z$
|
|
1458
|
-
styleInject(css_248z$
|
|
1466
|
+
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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\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-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\", 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-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: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 .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(--input-hover-border-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}";
|
|
1467
|
+
styleInject(css_248z$w);
|
|
1459
1468
|
|
|
1460
1469
|
const Input = ({
|
|
1461
1470
|
type = 'text',
|
|
@@ -1532,8 +1541,8 @@ const Input = ({
|
|
|
1532
1541
|
});
|
|
1533
1542
|
};
|
|
1534
1543
|
|
|
1535
|
-
var css_248z$
|
|
1536
|
-
styleInject(css_248z$
|
|
1544
|
+
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\", 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, .ff-radial-chart-container svg text {\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-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}";
|
|
1545
|
+
styleInject(css_248z$v);
|
|
1537
1546
|
|
|
1538
1547
|
const useColorMappings$1 = () => React.useMemo(() => {
|
|
1539
1548
|
return {
|
|
@@ -1552,7 +1561,7 @@ const useColorMappings$1 = () => React.useMemo(() => {
|
|
|
1552
1561
|
};
|
|
1553
1562
|
}, []);
|
|
1554
1563
|
// Function to generate SVG arc paths
|
|
1555
|
-
const calculateArc$
|
|
1564
|
+
const calculateArc$3 = ({
|
|
1556
1565
|
x,
|
|
1557
1566
|
y,
|
|
1558
1567
|
radius,
|
|
@@ -1567,9 +1576,9 @@ const calculateArc$1 = ({
|
|
|
1567
1576
|
return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
|
|
1568
1577
|
};
|
|
1569
1578
|
// Function to calculate arc paths and angles
|
|
1570
|
-
const calculateArcAngles = (statusValue, total, currentAngle, radius) => {
|
|
1579
|
+
const calculateArcAngles$1 = (statusValue, total, currentAngle, radius) => {
|
|
1571
1580
|
if (total === 0) {
|
|
1572
|
-
const backgroundArcPath = calculateArc$
|
|
1581
|
+
const backgroundArcPath = calculateArc$3({
|
|
1573
1582
|
x: 0,
|
|
1574
1583
|
y: 0,
|
|
1575
1584
|
radius,
|
|
@@ -1592,14 +1601,14 @@ const calculateArcAngles = (statusValue, total, currentAngle, radius) => {
|
|
|
1592
1601
|
startAngle = 0;
|
|
1593
1602
|
endAngle = 2 * Math.PI;
|
|
1594
1603
|
}
|
|
1595
|
-
const backgroundArcPath = calculateArc$
|
|
1604
|
+
const backgroundArcPath = calculateArc$3({
|
|
1596
1605
|
x: 0,
|
|
1597
1606
|
y: 0,
|
|
1598
1607
|
radius,
|
|
1599
1608
|
startAngle: 0,
|
|
1600
1609
|
endAngle: 2 * Math.PI
|
|
1601
1610
|
});
|
|
1602
|
-
const foregroundArcPath = calculateArc$
|
|
1611
|
+
const foregroundArcPath = calculateArc$3({
|
|
1603
1612
|
x: 0,
|
|
1604
1613
|
y: 0,
|
|
1605
1614
|
radius,
|
|
@@ -1640,7 +1649,7 @@ const RadialChart = ({
|
|
|
1640
1649
|
backgroundArcPath,
|
|
1641
1650
|
foregroundArcPath,
|
|
1642
1651
|
percentage
|
|
1643
|
-
} = calculateArcAngles(status.value, total, currentAngle, radius);
|
|
1652
|
+
} = calculateArcAngles$1(status.value, total, currentAngle, radius);
|
|
1644
1653
|
currentAngle = endAngle;
|
|
1645
1654
|
return jsxRuntime.jsx("svg", {
|
|
1646
1655
|
width: svgSize,
|
|
@@ -1675,8 +1684,8 @@ const RadialChart = ({
|
|
|
1675
1684
|
});
|
|
1676
1685
|
};
|
|
1677
1686
|
|
|
1678
|
-
var css_248z$
|
|
1679
|
-
styleInject(css_248z$
|
|
1687
|
+
var css_248z$u = "@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-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\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-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}";
|
|
1688
|
+
styleInject(css_248z$u);
|
|
1680
1689
|
|
|
1681
1690
|
const ExpandableMenu = ({
|
|
1682
1691
|
label = '',
|
|
@@ -1765,8 +1774,8 @@ const useClickOutside = (ref, callback, ignoreRefs = []) => {
|
|
|
1765
1774
|
}, [ref, callback, ignoreRefs]);
|
|
1766
1775
|
};
|
|
1767
1776
|
|
|
1768
|
-
var css_248z$
|
|
1769
|
-
styleInject(css_248z$
|
|
1777
|
+
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\", 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-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}";
|
|
1778
|
+
styleInject(css_248z$t);
|
|
1770
1779
|
|
|
1771
1780
|
const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
|
|
1772
1781
|
|
|
@@ -1844,8 +1853,8 @@ const Dropdown$1 = ({
|
|
|
1844
1853
|
});
|
|
1845
1854
|
};
|
|
1846
1855
|
|
|
1847
|
-
var css_248z$
|
|
1848
|
-
styleInject(css_248z$
|
|
1856
|
+
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-select-wrapper .ff-select, .ff-select-wrapper .ff-select-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-select-wrapper .ff-select-fieldset .ff-select-legend, .ff-select-wrapper .ff-select-label--active {\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-select-wrapper {\n position: relative;\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: 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-select-text-color);\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}";
|
|
1857
|
+
styleInject(css_248z$s);
|
|
1849
1858
|
|
|
1850
1859
|
const portalPosition = {
|
|
1851
1860
|
positionX: 0,
|
|
@@ -2206,8 +2215,8 @@ const Select$1 = ({
|
|
|
2206
2215
|
});
|
|
2207
2216
|
};
|
|
2208
2217
|
|
|
2209
|
-
var css_248z$
|
|
2210
|
-
styleInject(css_248z$
|
|
2218
|
+
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 {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\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-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\", 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-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}";
|
|
2219
|
+
styleInject(css_248z$r);
|
|
2211
2220
|
|
|
2212
2221
|
const truncateText = (text, maxLength) => {
|
|
2213
2222
|
if (!text || maxLength <= 0) return '';
|
|
@@ -2282,8 +2291,8 @@ const Textarea = ({
|
|
|
2282
2291
|
});
|
|
2283
2292
|
};
|
|
2284
2293
|
|
|
2285
|
-
var css_248z$
|
|
2286
|
-
styleInject(css_248z$
|
|
2294
|
+
var css_248z$q = ".ff-status-button {\n border: none;\n border-radius: 4px;\n padding: 0 4px;\n cursor: pointer;\n width: 76px;\n height: 16px;\n}\n.ff-status-button__text {\n color: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 76px;\n text-transform: capitalize;\n}\n.ff-status-button--passed {\n background-color: var(--status-button-bg-passed);\n color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n background-color: var(--status-button-bg-failed);\n color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n background-color: var(--status-button-bg-running);\n color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n background-color: var(--status-button-bg-skipped);\n color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n background-color: var(--status-button-bg-warning);\n color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n background-color: var(--status-button-bg-terminated);\n color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n background-color: var(--status-button-bg-partiallyExecuted);\n color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n background-color: var(--status-button-bg-aborted);\n color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n background-color: var(--status-button-bg-notExecuted);\n color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n opacity: 50%;\n cursor: not-allowed;\n}";
|
|
2295
|
+
styleInject(css_248z$q);
|
|
2287
2296
|
|
|
2288
2297
|
const StatusButton = ({
|
|
2289
2298
|
status = 'passed',
|
|
@@ -2311,8 +2320,8 @@ const StatusButton = ({
|
|
|
2311
2320
|
});
|
|
2312
2321
|
};
|
|
2313
2322
|
|
|
2314
|
-
var css_248z$
|
|
2315
|
-
styleInject(css_248z$
|
|
2323
|
+
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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-menu-option-container .ff-option-card .ff-options {\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-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-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-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 z-index: 100000;\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}";
|
|
2324
|
+
styleInject(css_248z$p);
|
|
2316
2325
|
|
|
2317
2326
|
const Option$1 = ({
|
|
2318
2327
|
option,
|
|
@@ -2433,8 +2442,8 @@ const MenuOption = ({
|
|
|
2433
2442
|
});
|
|
2434
2443
|
};
|
|
2435
2444
|
|
|
2436
|
-
var css_248z$
|
|
2437
|
-
styleInject(css_248z$
|
|
2445
|
+
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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-table tbody tr td {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd, .ff-table thead tr th {\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-fixed-header-table {\n overflow-y: auto;\n}\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 color: var(--text-color);\n border-bottom: 1px solid var(--slider-table-color);\n text-transform: uppercase;\n}\n.ff-table thead tr th:first-child div {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th:first-child div .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(--text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table tbody tr td:first-child div {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr td:first-child div .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\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}";
|
|
2446
|
+
styleInject(css_248z$o);
|
|
2438
2447
|
|
|
2439
2448
|
const isFunction$1 = functionToCheck => {
|
|
2440
2449
|
return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
|
|
@@ -2482,18 +2491,68 @@ const prepareData = (dataObj, columnObj) => {
|
|
|
2482
2491
|
}
|
|
2483
2492
|
};
|
|
2484
2493
|
|
|
2494
|
+
var css_248z$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\", 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}";
|
|
2495
|
+
styleInject(css_248z$n);
|
|
2496
|
+
|
|
2497
|
+
const Checkbox = ({
|
|
2498
|
+
id,
|
|
2499
|
+
name,
|
|
2500
|
+
label,
|
|
2501
|
+
disabled = false,
|
|
2502
|
+
checked: initialChecked = false,
|
|
2503
|
+
partial = false,
|
|
2504
|
+
onChange
|
|
2505
|
+
}) => {
|
|
2506
|
+
const [checked, setChecked] = React.useState(initialChecked);
|
|
2507
|
+
React.useEffect(() => {
|
|
2508
|
+
setChecked(initialChecked);
|
|
2509
|
+
}, [initialChecked]);
|
|
2510
|
+
const handleCheckboxChange = event => {
|
|
2511
|
+
if (!disabled) {
|
|
2512
|
+
setChecked(prev => !prev), onChange?.(event);
|
|
2513
|
+
}
|
|
2514
|
+
};
|
|
2515
|
+
return jsxRuntime.jsxs("label", {
|
|
2516
|
+
className: "ff-checkbox--overlay",
|
|
2517
|
+
htmlFor: id,
|
|
2518
|
+
children: [jsxRuntime.jsx("input", {
|
|
2519
|
+
type: "checkbox",
|
|
2520
|
+
className: "ff-checkbox-input",
|
|
2521
|
+
id: id,
|
|
2522
|
+
name: name,
|
|
2523
|
+
checked: checked,
|
|
2524
|
+
onChange: handleCheckboxChange,
|
|
2525
|
+
disabled: disabled
|
|
2526
|
+
}), jsxRuntime.jsx("span", {
|
|
2527
|
+
className: classNames('ff-checkbox-custom', {
|
|
2528
|
+
'ff-checkbox-checked': checked,
|
|
2529
|
+
'ff-storybook-checkbox--partial': partial && !checked
|
|
2530
|
+
}),
|
|
2531
|
+
children: checked && jsxRuntime.jsx(Icon, {
|
|
2532
|
+
name: "tick",
|
|
2533
|
+
height: 6,
|
|
2534
|
+
width: 8,
|
|
2535
|
+
color: "var(--primary-icon-color)"
|
|
2536
|
+
})
|
|
2537
|
+
}), jsxRuntime.jsx(Typography, {
|
|
2538
|
+
as: "label",
|
|
2539
|
+
children: label
|
|
2540
|
+
})]
|
|
2541
|
+
});
|
|
2542
|
+
};
|
|
2543
|
+
|
|
2485
2544
|
// import NoData from '../NoData/NoData';
|
|
2486
2545
|
const Table = ({
|
|
2487
2546
|
data = [],
|
|
2488
2547
|
columns = [],
|
|
2489
2548
|
headerType,
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2549
|
+
withCheckbox,
|
|
2550
|
+
onSelect,
|
|
2551
|
+
allSelected,
|
|
2552
|
+
partialSelected = false,
|
|
2494
2553
|
withFixedHeader = true,
|
|
2495
2554
|
borderWithRadius = false,
|
|
2496
|
-
|
|
2555
|
+
headerCheckboxDisabled = false,
|
|
2497
2556
|
// noDataContent,
|
|
2498
2557
|
// noDataImage,
|
|
2499
2558
|
// noDataImageSize,
|
|
@@ -2509,7 +2568,12 @@ const Table = ({
|
|
|
2509
2568
|
onClick(accessor, row);
|
|
2510
2569
|
}
|
|
2511
2570
|
};
|
|
2512
|
-
|
|
2571
|
+
const onSelectClick = (e, item) => {
|
|
2572
|
+
if (onSelect) {
|
|
2573
|
+
onSelect(e, item);
|
|
2574
|
+
}
|
|
2575
|
+
};
|
|
2576
|
+
if (checkEmpty(data)) return null;
|
|
2513
2577
|
return jsxRuntime.jsx("div", {
|
|
2514
2578
|
style: {
|
|
2515
2579
|
height: height
|
|
@@ -2526,26 +2590,50 @@ const Table = ({
|
|
|
2526
2590
|
'ff-fixed-header': withFixedHeader
|
|
2527
2591
|
}),
|
|
2528
2592
|
children: jsxRuntime.jsx("tr", {
|
|
2529
|
-
children: columns.map(column => jsxRuntime.jsx("th", {
|
|
2593
|
+
children: columns.map((column, index) => jsxRuntime.jsx("th", {
|
|
2530
2594
|
className: headerType && `${headerType}-bg`,
|
|
2531
2595
|
style: {
|
|
2532
2596
|
width: column?.width
|
|
2533
2597
|
},
|
|
2534
|
-
children: jsxRuntime.
|
|
2535
|
-
children:
|
|
2598
|
+
children: jsxRuntime.jsxs("div", {
|
|
2599
|
+
children: [index === 0 && withCheckbox && jsxRuntime.jsx("span", {
|
|
2600
|
+
className: "ff-table-checkbox",
|
|
2601
|
+
children: jsxRuntime.jsx(Checkbox, {
|
|
2602
|
+
onChange: e => {
|
|
2603
|
+
onSelectClick(e, {
|
|
2604
|
+
allSelected: e.target.checked
|
|
2605
|
+
});
|
|
2606
|
+
},
|
|
2607
|
+
checked: allSelected !== undefined ? allSelected : false,
|
|
2608
|
+
partial: !!partialSelected,
|
|
2609
|
+
disabled: headerCheckboxDisabled
|
|
2610
|
+
})
|
|
2611
|
+
}), column.header]
|
|
2536
2612
|
})
|
|
2537
2613
|
}, column.header))
|
|
2538
2614
|
})
|
|
2539
2615
|
}), jsxRuntime.jsx("tbody", {
|
|
2540
2616
|
children: data.length > 0 && data.map((row, index) => jsxRuntime.jsx("tr", {
|
|
2617
|
+
className: classNames(className, {
|
|
2618
|
+
'disabled-row': row.disabled
|
|
2619
|
+
}),
|
|
2541
2620
|
children: columns.map((column, i) => {
|
|
2542
2621
|
return jsxRuntime.jsx("td", {
|
|
2543
2622
|
onClick: () => hanleOnclick(column, row),
|
|
2544
2623
|
className: classNames(column.className, {
|
|
2545
2624
|
'clickable-cell': column.onClick
|
|
2546
2625
|
}),
|
|
2547
|
-
children: jsxRuntime.
|
|
2548
|
-
children:
|
|
2626
|
+
children: jsxRuntime.jsxs("div", {
|
|
2627
|
+
children: [i === 0 && withCheckbox && jsxRuntime.jsx("span", {
|
|
2628
|
+
className: "ff-table-checkbox",
|
|
2629
|
+
children: jsxRuntime.jsx(Checkbox, {
|
|
2630
|
+
onChange: e => {
|
|
2631
|
+
onSelectClick(e, row);
|
|
2632
|
+
},
|
|
2633
|
+
checked: row.checked,
|
|
2634
|
+
disabled: !!row.disabled
|
|
2635
|
+
})
|
|
2636
|
+
}), prepareData(row, column)]
|
|
2549
2637
|
})
|
|
2550
2638
|
}, column.accessor + i);
|
|
2551
2639
|
})
|
|
@@ -2555,11 +2643,11 @@ const Table = ({
|
|
|
2555
2643
|
});
|
|
2556
2644
|
};
|
|
2557
2645
|
|
|
2558
|
-
var css_248z$
|
|
2559
|
-
styleInject(css_248z$
|
|
2646
|
+
var css_248z$m = ".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}";
|
|
2647
|
+
styleInject(css_248z$m);
|
|
2560
2648
|
|
|
2561
|
-
var css_248z$
|
|
2562
|
-
styleInject(css_248z$
|
|
2649
|
+
var css_248z$l = ".ff-arrow-buttons-container {\n position: absolute;\n transition: opacity 0.3s ease;\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}";
|
|
2650
|
+
styleInject(css_248z$l);
|
|
2563
2651
|
|
|
2564
2652
|
const ArrowsButton = ({
|
|
2565
2653
|
direction,
|
|
@@ -2696,10 +2784,10 @@ const AddButton = ({
|
|
|
2696
2784
|
});
|
|
2697
2785
|
};
|
|
2698
2786
|
|
|
2699
|
-
var css_248z$
|
|
2700
|
-
styleInject(css_248z$
|
|
2787
|
+
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\", sans-serif;\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\", 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, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\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-donut-chart-svg-container svg text:nth-of-type(3) {\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-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}";
|
|
2788
|
+
styleInject(css_248z$k);
|
|
2701
2789
|
|
|
2702
|
-
const calculateArc = (x, y, radius, startAngle, endAngle) => {
|
|
2790
|
+
const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
|
|
2703
2791
|
const startX = x + radius * Math.cos(startAngle);
|
|
2704
2792
|
const startY = y + radius * Math.sin(startAngle);
|
|
2705
2793
|
const endX = x + radius * Math.cos(endAngle);
|
|
@@ -2765,10 +2853,10 @@ const DonutChart = ({
|
|
|
2765
2853
|
const normalizedStatus = statusValue?.status?.toLowerCase();
|
|
2766
2854
|
const isFullCircle = nonZeroValues.length === 1;
|
|
2767
2855
|
// Full circle handling
|
|
2768
|
-
const foregroundArcPath = isFullCircle ? calculateArc(0, 0, radius, 0, 2 * Math.PI) : calculateArc(0, 0, radius, currentAngle, endAngle);
|
|
2856
|
+
const foregroundArcPath = isFullCircle ? calculateArc$2(0, 0, radius, 0, 2 * Math.PI) : calculateArc$2(0, 0, radius, currentAngle, endAngle);
|
|
2769
2857
|
// Outer arc for hover effect
|
|
2770
2858
|
const outerArcRadius = radius + lineWidth - 1;
|
|
2771
|
-
const outerArcPath = isFullCircle ? calculateArc(0, 0, outerArcRadius, 0, 2 * Math.PI) : calculateArc(0, 0, outerArcRadius, currentAngle, endAngle);
|
|
2859
|
+
const outerArcPath = isFullCircle ? calculateArc$2(0, 0, outerArcRadius, 0, 2 * Math.PI) : calculateArc$2(0, 0, outerArcRadius, currentAngle, endAngle);
|
|
2772
2860
|
currentAngle = endAngle + gapAngle;
|
|
2773
2861
|
return jsxRuntime.jsxs("g", {
|
|
2774
2862
|
children: [jsxRuntime.jsx("path", {
|
|
@@ -3049,8 +3137,8 @@ const useFileDropzone = options => {
|
|
|
3049
3137
|
};
|
|
3050
3138
|
};
|
|
3051
3139
|
|
|
3052
|
-
var css_248z$
|
|
3053
|
-
styleInject(css_248z$
|
|
3140
|
+
var css_248z$j = ".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}";
|
|
3141
|
+
styleInject(css_248z$j);
|
|
3054
3142
|
|
|
3055
3143
|
const Dropzone = ({
|
|
3056
3144
|
icon,
|
|
@@ -5979,7 +6067,7 @@ function createFormControl(props = {}) {
|
|
|
5979
6067
|
timer = setTimeout(callback, wait);
|
|
5980
6068
|
};
|
|
5981
6069
|
const _updateValid = async (shouldUpdateValid) => {
|
|
5982
|
-
if (!
|
|
6070
|
+
if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
|
5983
6071
|
const isValid = _options.resolver
|
|
5984
6072
|
? isEmptyObject((await _executeSchema()).errors)
|
|
5985
6073
|
: await executeBuiltInValidation(_fields, true);
|
|
@@ -5991,7 +6079,7 @@ function createFormControl(props = {}) {
|
|
|
5991
6079
|
}
|
|
5992
6080
|
};
|
|
5993
6081
|
const _updateIsValidating = (names, isValidating) => {
|
|
5994
|
-
if (!
|
|
6082
|
+
if (!_options.disabled &&
|
|
5995
6083
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
|
5996
6084
|
(names || Array.from(_names.mount)).forEach((name) => {
|
|
5997
6085
|
if (name) {
|
|
@@ -6007,7 +6095,7 @@ function createFormControl(props = {}) {
|
|
|
6007
6095
|
}
|
|
6008
6096
|
};
|
|
6009
6097
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
|
6010
|
-
if (args && method && !
|
|
6098
|
+
if (args && method && !_options.disabled) {
|
|
6011
6099
|
_state.action = true;
|
|
6012
6100
|
if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
|
|
6013
6101
|
const fieldValues = method(get(_fields, name), args.argA, args.argB);
|
|
@@ -6071,7 +6159,7 @@ function createFormControl(props = {}) {
|
|
|
6071
6159
|
const output = {
|
|
6072
6160
|
name,
|
|
6073
6161
|
};
|
|
6074
|
-
if (!
|
|
6162
|
+
if (!_options.disabled) {
|
|
6075
6163
|
const disabledField = !!(get(_fields, name) &&
|
|
6076
6164
|
get(_fields, name)._f &&
|
|
6077
6165
|
get(_fields, name)._f.disabled);
|
|
@@ -6207,7 +6295,7 @@ function createFormControl(props = {}) {
|
|
|
6207
6295
|
}
|
|
6208
6296
|
_names.unMount = new Set();
|
|
6209
6297
|
};
|
|
6210
|
-
const _getDirty = (name, data) => !
|
|
6298
|
+
const _getDirty = (name, data) => !_options.disabled &&
|
|
6211
6299
|
(name && data && set(_formValues, name, data),
|
|
6212
6300
|
!deepEqual(getValues(), _defaultValues));
|
|
6213
6301
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
|
@@ -6523,7 +6611,7 @@ function createFormControl(props = {}) {
|
|
|
6523
6611
|
};
|
|
6524
6612
|
const register = (name, options = {}) => {
|
|
6525
6613
|
let field = get(_fields, name);
|
|
6526
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
|
6614
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
|
6527
6615
|
set(_fields, name, {
|
|
6528
6616
|
...(field || {}),
|
|
6529
6617
|
_f: {
|
|
@@ -6539,7 +6627,7 @@ function createFormControl(props = {}) {
|
|
|
6539
6627
|
field,
|
|
6540
6628
|
disabled: isBoolean(options.disabled)
|
|
6541
6629
|
? options.disabled
|
|
6542
|
-
:
|
|
6630
|
+
: _options.disabled,
|
|
6543
6631
|
name,
|
|
6544
6632
|
value: options.value,
|
|
6545
6633
|
});
|
|
@@ -6549,7 +6637,7 @@ function createFormControl(props = {}) {
|
|
|
6549
6637
|
}
|
|
6550
6638
|
return {
|
|
6551
6639
|
...(disabledIsDefined
|
|
6552
|
-
? { disabled: options.disabled ||
|
|
6640
|
+
? { disabled: options.disabled || _options.disabled }
|
|
6553
6641
|
: {}),
|
|
6554
6642
|
...(_options.progressive
|
|
6555
6643
|
? {
|
|
@@ -6633,6 +6721,12 @@ function createFormControl(props = {}) {
|
|
|
6633
6721
|
e.preventDefault && e.preventDefault();
|
|
6634
6722
|
e.persist && e.persist();
|
|
6635
6723
|
}
|
|
6724
|
+
if (_options.disabled) {
|
|
6725
|
+
if (onInvalid) {
|
|
6726
|
+
await onInvalid({ ..._formState.errors }, e);
|
|
6727
|
+
}
|
|
6728
|
+
return;
|
|
6729
|
+
}
|
|
6636
6730
|
let fieldValues = cloneObject(_formValues);
|
|
6637
6731
|
_subjects.state.next({
|
|
6638
6732
|
isSubmitting: true,
|
|
@@ -6811,7 +6905,9 @@ function createFormControl(props = {}) {
|
|
|
6811
6905
|
: fieldReference.ref;
|
|
6812
6906
|
if (fieldRef.focus) {
|
|
6813
6907
|
fieldRef.focus();
|
|
6814
|
-
options.shouldSelect &&
|
|
6908
|
+
options.shouldSelect &&
|
|
6909
|
+
isFunction(fieldRef.select) &&
|
|
6910
|
+
fieldRef.select();
|
|
6815
6911
|
}
|
|
6816
6912
|
}
|
|
6817
6913
|
};
|
|
@@ -7012,17 +7108,12 @@ function useForm(props = {}) {
|
|
|
7012
7108
|
values: control._getWatch(),
|
|
7013
7109
|
});
|
|
7014
7110
|
}, [props.shouldUnregister, control]);
|
|
7015
|
-
React.useEffect(() => {
|
|
7016
|
-
if (_formControl.current) {
|
|
7017
|
-
_formControl.current.watch = _formControl.current.watch.bind({});
|
|
7018
|
-
}
|
|
7019
|
-
}, [formState]);
|
|
7020
7111
|
_formControl.current.formState = getProxyFormState(formState, control);
|
|
7021
7112
|
return _formControl.current;
|
|
7022
7113
|
}
|
|
7023
7114
|
|
|
7024
|
-
var css_248z$
|
|
7025
|
-
styleInject(css_248z$
|
|
7115
|
+
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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-form-container {\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-form-container {\n background-color: var(--hover-color);\n border: 1px solid var(--arrows-button-border-color);\n border-radius: 8px;\n padding: 20px;\n width: 400px;\n margin: 0 auto;\n}\n.ff-form-container .ff-form-group {\n margin-bottom: 16px;\n}\n.ff-form-container .ff-form-group .ff-label {\n display: block;\n margin-bottom: 4px;\n font-weight: bold;\n}\n.ff-form-container .ff-form-group input {\n width: 94%;\n padding: 10px;\n border: 1px solid var(--arrows-button-border-color);\n border-radius: 8px;\n}\n.ff-form-container .ff-form-group input:focus {\n border-color: var(--brand-color);\n}\n.ff-form-container .ff-form-group input.ff-error {\n border-color: var(--ff-error-light);\n}\n.ff-form-container .ff-form-group .ff-error {\n color: var(--error-light);\n margin-top: 4px;\n}\n.ff-form-container .ff-form-group {\n margin-bottom: 16px;\n}\n.ff-form-container .ff-form-group .ff-label {\n display: block;\n margin-bottom: 4px;\n font-weight: bold;\n}\n.ff-form-container .ff-form-group input,\n.ff-form-container .ff-form-group select {\n width: 94%;\n padding: 10px;\n border: 1px solid var(--arrows-button-border-color);\n border-radius: 8px;\n}\n.ff-form-container .ff-form-group input:focus,\n.ff-form-container .ff-form-group select:focus {\n border-color: var(--brand-color);\n}\n.ff-form-container .ff-form-group input.ff-error,\n.ff-form-container .ff-form-group select.ff-error {\n border-color: var(--ff-error-light);\n}\n.ff-form-container .ff-form-radio-group {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-bottom: 16px;\n}\n.ff-form-container .ff-form-radio-group .ff-radio-group-wrapper {\n display: flex;\n}\n.ff-form-container .ff-form-radio-group .ff-radio-gender {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-form-container .ff-form-radio-group .ff-radio-gender input[type=radio] {\n margin-right: 0.5rem;\n}\n.ff-form-container .ff-form-radio-group .ff-error {\n padding-left: 12px;\n color: var(--error-light);\n margin-top: 4px;\n}\n.ff-form-container .ff-button-layout {\n width: 99%;\n display: flex;\n gap: 12px;\n margin-top: 24px;\n}\n.ff-form-container .ff-button-layout button {\n width: 50%;\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n border: none;\n border-radius: 8px;\n padding: 10px;\n cursor: pointer;\n}";
|
|
7116
|
+
styleInject(css_248z$i);
|
|
7026
7117
|
|
|
7027
7118
|
const Form = ({
|
|
7028
7119
|
onSubmit,
|
|
@@ -7056,8 +7147,8 @@ const Form = ({
|
|
|
7056
7147
|
});
|
|
7057
7148
|
};
|
|
7058
7149
|
|
|
7059
|
-
var css_248z$
|
|
7060
|
-
styleInject(css_248z$
|
|
7150
|
+
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\", sans-serif;\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\", 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-input-with-dropdown-container .ff-helper-text {\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-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: -6.5px;\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}";
|
|
7151
|
+
styleInject(css_248z$h);
|
|
7061
7152
|
|
|
7062
7153
|
const InputWithDropdown = ({
|
|
7063
7154
|
name = '',
|
|
@@ -7137,8 +7228,8 @@ const InputWithDropdown = ({
|
|
|
7137
7228
|
});
|
|
7138
7229
|
};
|
|
7139
7230
|
|
|
7140
|
-
var css_248z$
|
|
7141
|
-
styleInject(css_248z$
|
|
7231
|
+
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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-radio {\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-radio {\n position: relative;\n color: var(--text-color);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-radio .ff-radio-input {\n display: none;\n}\n.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 .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 .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:hover .ff-radio-custom {\n border: 1px solid var(--brand-color);\n}\n.ff-radio:hover .ff-radio-custom::before {\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio:hover .ff-radio-custom::after {\n opacity: 1;\n transition: opacity 0.3s;\n}\n.ff-radio .ff-radio-input:checked + .ff-radio-custom {\n border-color: var(--brand-color);\n}\n.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 .ff-radio-input:disabled + .ff-radio-custom {\n border: 1px solid var(--radio-button-border);\n}\n.ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n background: var(--drawer-footer-bg);\n}\n.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 .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 .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n background: var(--brand-color);\n}\n.ff-radio--disabled {\n cursor: default;\n opacity: 0.5;\n}";
|
|
7232
|
+
styleInject(css_248z$g);
|
|
7142
7233
|
|
|
7143
7234
|
const RadioButton = ({
|
|
7144
7235
|
label,
|
|
@@ -7166,8 +7257,8 @@ const RadioButton = ({
|
|
|
7166
7257
|
});
|
|
7167
7258
|
};
|
|
7168
7259
|
|
|
7169
|
-
var css_248z$
|
|
7170
|
-
styleInject(css_248z$
|
|
7260
|
+
var css_248z$f = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}";
|
|
7261
|
+
styleInject(css_248z$f);
|
|
7171
7262
|
|
|
7172
7263
|
const RadioGroup = ({
|
|
7173
7264
|
options,
|
|
@@ -7189,8 +7280,8 @@ const RadioGroup = ({
|
|
|
7189
7280
|
});
|
|
7190
7281
|
};
|
|
7191
7282
|
|
|
7192
|
-
var css_248z$
|
|
7193
|
-
styleInject(css_248z$
|
|
7283
|
+
var css_248z$e = ".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 border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n filter: drop-shadow(0 -2px 1px var(--ff-mini-modal-box-shadow));\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(-2px 0 1px var(--ff-mini-modal-box-shadow));\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-box-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n right: -10px;\n top: 75px;\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-box-shadow));\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: 50%;\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 0px 4px 0px var(--ff-mini-modal-box-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}";
|
|
7284
|
+
styleInject(css_248z$e);
|
|
7194
7285
|
|
|
7195
7286
|
const MiniModal = /*#__PURE__*/React.forwardRef(({
|
|
7196
7287
|
anchorRef,
|
|
@@ -7360,58 +7451,8 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
|
|
|
7360
7451
|
}), document.body);
|
|
7361
7452
|
});
|
|
7362
7453
|
|
|
7363
|
-
var css_248z$
|
|
7364
|
-
styleInject(css_248z$
|
|
7365
|
-
|
|
7366
|
-
const Checkbox = ({
|
|
7367
|
-
id,
|
|
7368
|
-
name,
|
|
7369
|
-
label,
|
|
7370
|
-
disabled = false,
|
|
7371
|
-
checked: initialChecked = false,
|
|
7372
|
-
partial = false,
|
|
7373
|
-
onChange
|
|
7374
|
-
}) => {
|
|
7375
|
-
const [checked, setChecked] = React.useState(initialChecked);
|
|
7376
|
-
React.useEffect(() => {
|
|
7377
|
-
setChecked(initialChecked);
|
|
7378
|
-
}, [initialChecked]);
|
|
7379
|
-
const handleCheckboxChange = event => {
|
|
7380
|
-
if (!disabled) {
|
|
7381
|
-
setChecked(prev => !prev), onChange?.(event);
|
|
7382
|
-
}
|
|
7383
|
-
};
|
|
7384
|
-
return jsxRuntime.jsxs("label", {
|
|
7385
|
-
className: "ff-checkbox--overlay",
|
|
7386
|
-
htmlFor: id,
|
|
7387
|
-
children: [jsxRuntime.jsx("input", {
|
|
7388
|
-
type: "checkbox",
|
|
7389
|
-
className: "ff-checkbox-input",
|
|
7390
|
-
id: id,
|
|
7391
|
-
name: name,
|
|
7392
|
-
checked: checked,
|
|
7393
|
-
onChange: handleCheckboxChange,
|
|
7394
|
-
disabled: disabled
|
|
7395
|
-
}), jsxRuntime.jsx("span", {
|
|
7396
|
-
className: classNames('ff-checkbox-custom', {
|
|
7397
|
-
'ff-checkbox-checked': checked,
|
|
7398
|
-
'ff-storybook-checkbox--partial': partial && !checked
|
|
7399
|
-
}),
|
|
7400
|
-
children: checked && jsxRuntime.jsx(Icon, {
|
|
7401
|
-
name: "tick",
|
|
7402
|
-
height: 6,
|
|
7403
|
-
width: 8,
|
|
7404
|
-
color: "var(--primary-icon-color)"
|
|
7405
|
-
})
|
|
7406
|
-
}), jsxRuntime.jsx(Typography, {
|
|
7407
|
-
as: "label",
|
|
7408
|
-
children: label
|
|
7409
|
-
})]
|
|
7410
|
-
});
|
|
7411
|
-
};
|
|
7412
|
-
|
|
7413
|
-
var css_248z$9 = "@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-tree-container {\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-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-action-section {\n display: block;\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-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: 16px;\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}";
|
|
7414
|
-
styleInject(css_248z$9);
|
|
7454
|
+
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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-tree-container {\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-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-action-section {\n display: block;\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-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: 16px;\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}";
|
|
7455
|
+
styleInject(css_248z$d);
|
|
7415
7456
|
|
|
7416
7457
|
const TableTree = ({
|
|
7417
7458
|
columnsData,
|
|
@@ -7570,8 +7611,8 @@ const TableTree = ({
|
|
|
7570
7611
|
});
|
|
7571
7612
|
};
|
|
7572
7613
|
|
|
7573
|
-
var css_248z$
|
|
7574
|
-
styleInject(css_248z$
|
|
7614
|
+
var css_248z$c = ":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}\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\", 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-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}";
|
|
7615
|
+
styleInject(css_248z$c);
|
|
7575
7616
|
|
|
7576
7617
|
const Tabs = ({
|
|
7577
7618
|
variant = 'default',
|
|
@@ -7622,8 +7663,8 @@ const Tabs = ({
|
|
|
7622
7663
|
});
|
|
7623
7664
|
};
|
|
7624
7665
|
|
|
7625
|
-
var css_248z$
|
|
7626
|
-
styleInject(css_248z$
|
|
7666
|
+
var css_248z$b = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
|
|
7667
|
+
styleInject(css_248z$b);
|
|
7627
7668
|
|
|
7628
7669
|
// Function to escape special characters in the search term
|
|
7629
7670
|
const escapeRegExp = text => {
|
|
@@ -7646,8 +7687,8 @@ const HighlightText = ({
|
|
|
7646
7687
|
});
|
|
7647
7688
|
};
|
|
7648
7689
|
|
|
7649
|
-
var css_248z$
|
|
7650
|
-
styleInject(css_248z$
|
|
7690
|
+
var css_248z$a = "@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\", 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-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}";
|
|
7691
|
+
styleInject(css_248z$a);
|
|
7651
7692
|
|
|
7652
7693
|
const Search = ({
|
|
7653
7694
|
placeholder = 'Search',
|
|
@@ -15651,8 +15692,8 @@ const TimePicker = ({
|
|
|
15651
15692
|
});
|
|
15652
15693
|
};
|
|
15653
15694
|
|
|
15654
|
-
var css_248z$5 = "@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}";
|
|
15655
|
-
styleInject(css_248z$
|
|
15695
|
+
var css_248z$9 = "@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}";
|
|
15696
|
+
styleInject(css_248z$9);
|
|
15656
15697
|
|
|
15657
15698
|
const CustomDatePicker = ({
|
|
15658
15699
|
minDate,
|
|
@@ -16172,8 +16213,8 @@ const StateDropdown = ({
|
|
|
16172
16213
|
});
|
|
16173
16214
|
};
|
|
16174
16215
|
|
|
16175
|
-
var css_248z$
|
|
16176
|
-
styleInject(css_248z$
|
|
16216
|
+
var css_248z$8 = "@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-plus-icon {\n min-width: 71px;\n min-height: 24px;\n border-radius: 12px;\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 .ff-icon-color path {\n color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n min-width: 33px;\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 min-width: 33px;\n min-height: 20px;\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 .ff-icon-color path {\n color: var(--secondary-icon-color);\n}";
|
|
16217
|
+
styleInject(css_248z$8);
|
|
16177
16218
|
|
|
16178
16219
|
const IconButton = ({
|
|
16179
16220
|
label,
|
|
@@ -16197,8 +16238,8 @@ const IconButton = ({
|
|
|
16197
16238
|
});
|
|
16198
16239
|
};
|
|
16199
16240
|
|
|
16200
|
-
var css_248z$
|
|
16201
|
-
styleInject(css_248z$
|
|
16241
|
+
var css_248z$7 = ".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 border-radius: 12px;\n padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n height: 32px;\n width: 100%;\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 16px;\n}";
|
|
16242
|
+
styleInject(css_248z$7);
|
|
16202
16243
|
|
|
16203
16244
|
const Modal = ({
|
|
16204
16245
|
isOpen,
|
|
@@ -20877,8 +20918,8 @@ const DragAndDrop = {
|
|
|
20877
20918
|
DNDUtilities
|
|
20878
20919
|
};
|
|
20879
20920
|
|
|
20880
|
-
var css_248z$
|
|
20881
|
-
styleInject(css_248z$
|
|
20921
|
+
var css_248z$6 = ".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: 32px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-dropdown .ff-search span {\n position: absolute;\n top: 15px;\n left: 20px;\n}\n.ff-all-project .ff-dropdown .scroll {\n max-height: 124px;\n overflow-y: scroll;\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}\n.ff-all-project .ff-dropdown .option-card .all-projects-option {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n}";
|
|
20922
|
+
styleInject(css_248z$6);
|
|
20882
20923
|
|
|
20883
20924
|
const AllProjectsDropdown = () => {
|
|
20884
20925
|
const [showOptions, setShowOptions] = React.useState(false);
|
|
@@ -20985,56 +21026,212 @@ const AllProjectsDropdown = () => {
|
|
|
20985
21026
|
});
|
|
20986
21027
|
};
|
|
20987
21028
|
|
|
20988
|
-
var css_248z$
|
|
20989
|
-
styleInject(css_248z$
|
|
21029
|
+
var css_248z$5 = ".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}";
|
|
21030
|
+
styleInject(css_248z$5);
|
|
20990
21031
|
|
|
20991
|
-
const
|
|
20992
|
-
|
|
20993
|
-
|
|
20994
|
-
|
|
20995
|
-
|
|
20996
|
-
|
|
20997
|
-
selectedQuickMenu,
|
|
20998
|
-
onMenuClick = () => {},
|
|
20999
|
-
onSubMenuClick = () => {},
|
|
21000
|
-
onQuickMenuClick = () => {}
|
|
21032
|
+
const calculateArc$1 = ({
|
|
21033
|
+
x,
|
|
21034
|
+
y,
|
|
21035
|
+
radius,
|
|
21036
|
+
startAngle,
|
|
21037
|
+
endAngle
|
|
21001
21038
|
}) => {
|
|
21002
|
-
|
|
21003
|
-
|
|
21004
|
-
|
|
21005
|
-
|
|
21006
|
-
|
|
21007
|
-
|
|
21008
|
-
|
|
21009
|
-
|
|
21010
|
-
|
|
21011
|
-
|
|
21012
|
-
|
|
21013
|
-
|
|
21014
|
-
|
|
21015
|
-
|
|
21016
|
-
|
|
21017
|
-
|
|
21018
|
-
|
|
21019
|
-
|
|
21020
|
-
|
|
21021
|
-
|
|
21022
|
-
|
|
21023
|
-
|
|
21024
|
-
|
|
21025
|
-
|
|
21026
|
-
|
|
21027
|
-
|
|
21028
|
-
|
|
21029
|
-
|
|
21030
|
-
|
|
21031
|
-
|
|
21032
|
-
|
|
21033
|
-
|
|
21034
|
-
|
|
21035
|
-
|
|
21036
|
-
|
|
21037
|
-
|
|
21039
|
+
const startX = x + radius * Math.cos(startAngle);
|
|
21040
|
+
const startY = y + radius * Math.sin(startAngle);
|
|
21041
|
+
const endX = x + radius * Math.cos(endAngle);
|
|
21042
|
+
const endY = y + radius * Math.sin(endAngle);
|
|
21043
|
+
const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
|
|
21044
|
+
return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} L ${x} ${y} Z`;
|
|
21045
|
+
};
|
|
21046
|
+
const calculateArcAngles = (value, total, currentAngle, radius) => {
|
|
21047
|
+
if (total === 0) {
|
|
21048
|
+
return {
|
|
21049
|
+
endAngle: currentAngle,
|
|
21050
|
+
backgroundArcPath: '',
|
|
21051
|
+
foregroundArcPath: '',
|
|
21052
|
+
percentage: 0
|
|
21053
|
+
};
|
|
21054
|
+
}
|
|
21055
|
+
const percentage = value / total;
|
|
21056
|
+
const angleIncrement = percentage * 2 * Math.PI;
|
|
21057
|
+
const startAngle = currentAngle;
|
|
21058
|
+
const endAngle = startAngle + angleIncrement;
|
|
21059
|
+
const path = calculateArc$1({
|
|
21060
|
+
x: 0,
|
|
21061
|
+
y: 0,
|
|
21062
|
+
radius,
|
|
21063
|
+
startAngle,
|
|
21064
|
+
endAngle
|
|
21065
|
+
});
|
|
21066
|
+
return {
|
|
21067
|
+
endAngle,
|
|
21068
|
+
backgroundArcPath: path,
|
|
21069
|
+
foregroundArcPath: path,
|
|
21070
|
+
percentage
|
|
21071
|
+
};
|
|
21072
|
+
};
|
|
21073
|
+
const PieChart = ({
|
|
21074
|
+
radius = 15,
|
|
21075
|
+
colors = [],
|
|
21076
|
+
data = [],
|
|
21077
|
+
chartBorder = false
|
|
21078
|
+
}) => {
|
|
21079
|
+
const [tooltip, setTooltip] = React.useState(null);
|
|
21080
|
+
const [tooltipPosition, setTooltipPosition] = React.useState({
|
|
21081
|
+
x: 0,
|
|
21082
|
+
y: 0
|
|
21083
|
+
});
|
|
21084
|
+
const total = data.reduce((acc, item) => acc + item.value, 0);
|
|
21085
|
+
let currentAngle = -Math.PI / 2;
|
|
21086
|
+
const svgSize = 2 * (radius + 5);
|
|
21087
|
+
const chartData = chartBorder && data.length > 0 ? [{
|
|
21088
|
+
label: data[0]?.label || '',
|
|
21089
|
+
value: data.slice(1).reduce((acc, item) => acc + item.value, 0)
|
|
21090
|
+
}, ...data.slice(1)] : data;
|
|
21091
|
+
const handleMouseMove = e => {
|
|
21092
|
+
const {
|
|
21093
|
+
clientX: x,
|
|
21094
|
+
clientY: y
|
|
21095
|
+
} = e;
|
|
21096
|
+
setTooltipPosition({
|
|
21097
|
+
x,
|
|
21098
|
+
y
|
|
21099
|
+
});
|
|
21100
|
+
};
|
|
21101
|
+
const handleMouseEnter = (item, color) => {
|
|
21102
|
+
setTooltip({
|
|
21103
|
+
label: item.label,
|
|
21104
|
+
value: item.value,
|
|
21105
|
+
color
|
|
21106
|
+
});
|
|
21107
|
+
};
|
|
21108
|
+
const handleMouseLeave = () => {
|
|
21109
|
+
setTooltip(null);
|
|
21110
|
+
};
|
|
21111
|
+
const legendItems = chartData.map((item, index) => jsxRuntime.jsxs("div", {
|
|
21112
|
+
className: "ff-pie-chart-legend-item",
|
|
21113
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
21114
|
+
as: "div",
|
|
21115
|
+
fontSize: 24,
|
|
21116
|
+
fontWeight: "semi-bold",
|
|
21117
|
+
lineHeight: "36px",
|
|
21118
|
+
color: colors[index % colors.length] || '',
|
|
21119
|
+
children: item.value
|
|
21120
|
+
}), jsxRuntime.jsx(Typography, {
|
|
21121
|
+
as: "div",
|
|
21122
|
+
fontSize: 10,
|
|
21123
|
+
fontWeight: "regular",
|
|
21124
|
+
lineHeight: "18px",
|
|
21125
|
+
className: "ff-Pie-chart-legend-value",
|
|
21126
|
+
children: item.label
|
|
21127
|
+
})]
|
|
21128
|
+
}, item.label));
|
|
21129
|
+
return jsxRuntime.jsxs("div", {
|
|
21130
|
+
className: "ff-pie-chart-container",
|
|
21131
|
+
onMouseMove: handleMouseMove,
|
|
21132
|
+
children: [jsxRuntime.jsx("div", {
|
|
21133
|
+
className: ` ${chartBorder ? 'ff-pie-chart-border' : ''}`,
|
|
21134
|
+
style: {
|
|
21135
|
+
width: svgSize,
|
|
21136
|
+
height: svgSize
|
|
21137
|
+
},
|
|
21138
|
+
children: jsxRuntime.jsx("svg", {
|
|
21139
|
+
width: svgSize,
|
|
21140
|
+
height: svgSize,
|
|
21141
|
+
viewBox: `0 0 ${svgSize} ${svgSize}`,
|
|
21142
|
+
children: jsxRuntime.jsx("g", {
|
|
21143
|
+
transform: `translate(${radius + 5}, ${radius + 5})`,
|
|
21144
|
+
children: chartData.map((item, index) => {
|
|
21145
|
+
const {
|
|
21146
|
+
endAngle,
|
|
21147
|
+
backgroundArcPath
|
|
21148
|
+
} = calculateArcAngles(item.value, total, currentAngle, radius);
|
|
21149
|
+
currentAngle = endAngle;
|
|
21150
|
+
const color = colors[index % colors.length] || '';
|
|
21151
|
+
return jsxRuntime.jsxs("g", {
|
|
21152
|
+
children: [jsxRuntime.jsx("path", {
|
|
21153
|
+
d: backgroundArcPath,
|
|
21154
|
+
fill: color,
|
|
21155
|
+
stroke: "white",
|
|
21156
|
+
strokeWidth: 0.5,
|
|
21157
|
+
onMouseEnter: () => handleMouseEnter(item, color),
|
|
21158
|
+
onMouseLeave: handleMouseLeave
|
|
21159
|
+
}), jsxRuntime.jsx("text", {
|
|
21160
|
+
x: radius / 2 * Math.cos((currentAngle + endAngle) / 2),
|
|
21161
|
+
y: radius / 2 * Math.sin((currentAngle + endAngle) / 2),
|
|
21162
|
+
fill: "white",
|
|
21163
|
+
textAnchor: "middle",
|
|
21164
|
+
dominantBaseline: "central"
|
|
21165
|
+
})]
|
|
21166
|
+
}, item.label);
|
|
21167
|
+
})
|
|
21168
|
+
})
|
|
21169
|
+
})
|
|
21170
|
+
}), tooltip && jsxRuntime.jsxs("div", {
|
|
21171
|
+
className: "ff-pie-chart-tooltip",
|
|
21172
|
+
style: {
|
|
21173
|
+
top: tooltipPosition.y,
|
|
21174
|
+
left: tooltipPosition.x,
|
|
21175
|
+
border: `2px solid ${tooltip.color}`
|
|
21176
|
+
},
|
|
21177
|
+
children: [tooltip.label, " : ", tooltip.value]
|
|
21178
|
+
}), jsxRuntime.jsx("div", {
|
|
21179
|
+
className: "ff-pie-chart-legend",
|
|
21180
|
+
children: legendItems
|
|
21181
|
+
})]
|
|
21182
|
+
});
|
|
21183
|
+
};
|
|
21184
|
+
|
|
21185
|
+
var css_248z$4 = ".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-logo-icon {\n padding: 8px;\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 color: var(--ff-header-text-color);\n cursor: pointer;\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--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 .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 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--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-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-right-content {\n height: 24px;\n padding: 8px;\n}";
|
|
21186
|
+
styleInject(css_248z$4);
|
|
21187
|
+
|
|
21188
|
+
const AppHeader = ({
|
|
21189
|
+
logoIconName = 'fireflink_icon',
|
|
21190
|
+
rightContent,
|
|
21191
|
+
appHeaderMenuItems,
|
|
21192
|
+
selectedMenu,
|
|
21193
|
+
selectedSubMenu,
|
|
21194
|
+
selectedQuickMenu,
|
|
21195
|
+
onMenuClick = () => {},
|
|
21196
|
+
onSubMenuClick = () => {},
|
|
21197
|
+
onQuickMenuClick = () => {}
|
|
21198
|
+
}) => {
|
|
21199
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
21200
|
+
children: jsxRuntime.jsxs("div", {
|
|
21201
|
+
className: "ff-app-header",
|
|
21202
|
+
children: [jsxRuntime.jsx("div", {
|
|
21203
|
+
className: "ff-app-header-logo-icon",
|
|
21204
|
+
children: jsxRuntime.jsx(Icon, {
|
|
21205
|
+
color: "",
|
|
21206
|
+
name: logoIconName,
|
|
21207
|
+
height: 24,
|
|
21208
|
+
width: 21
|
|
21209
|
+
})
|
|
21210
|
+
}), jsxRuntime.jsxs("div", {
|
|
21211
|
+
className: "ff-app-header-nav-bar",
|
|
21212
|
+
children: [jsxRuntime.jsx("div", {
|
|
21213
|
+
children: "All projects"
|
|
21214
|
+
}), jsxRuntime.jsx("div", {
|
|
21215
|
+
className: "ff-app-header-nav-bar-items fontSm",
|
|
21216
|
+
children: appHeaderMenuItems.map(menuItem => {
|
|
21217
|
+
return jsxRuntime.jsxs("div", {
|
|
21218
|
+
className: classNames('ff-app-header-nav-bar-item', {
|
|
21219
|
+
['ff-app-header-nav-bar-item--selected']: menuItem.menuName === selectedMenu
|
|
21220
|
+
}),
|
|
21221
|
+
onClick: () => onMenuClick(menuItem.menuName),
|
|
21222
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
21223
|
+
as: "div",
|
|
21224
|
+
className: "ff-app-header-nav-bar-item-label",
|
|
21225
|
+
lineHeight: "18px",
|
|
21226
|
+
children: menuItem.menuName
|
|
21227
|
+
}), menuItem.menuName === selectedMenu && menuItem?.subMenuItems && menuItem.subMenuItems.map(subMenuItem => {
|
|
21228
|
+
return jsxRuntime.jsxs("div", {
|
|
21229
|
+
onClick: () => onSubMenuClick(subMenuItem.subMenuName),
|
|
21230
|
+
className: "ff-app-header-submenu-container",
|
|
21231
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
21232
|
+
as: "div",
|
|
21233
|
+
className: classNames('ff-app-header-nav-bar-submenu-item', {
|
|
21234
|
+
['ff-app-header-nav-bar-submenu-item--selected']: subMenuItem.subMenuName === selectedSubMenu
|
|
21038
21235
|
}),
|
|
21039
21236
|
lineHeight: "18px",
|
|
21040
21237
|
children: subMenuItem.subMenuName
|
|
@@ -21078,11 +21275,278 @@ const AppHeader = ({
|
|
|
21078
21275
|
});
|
|
21079
21276
|
};
|
|
21080
21277
|
|
|
21278
|
+
var css_248z$3 = "@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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\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\", 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, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\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-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}";
|
|
21279
|
+
styleInject(css_248z$3);
|
|
21280
|
+
|
|
21281
|
+
const calculateArc = (x, y, radius, startAngle, endAngle) => {
|
|
21282
|
+
const startX = x + radius * Math.cos(startAngle);
|
|
21283
|
+
const startY = y + radius * Math.sin(startAngle);
|
|
21284
|
+
const endX = x + radius * Math.cos(endAngle);
|
|
21285
|
+
const endY = y + radius * Math.sin(endAngle);
|
|
21286
|
+
const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
|
|
21287
|
+
return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
|
|
21288
|
+
};
|
|
21289
|
+
const colorMapping = ['var(--status-success-text-color)', 'var(--status-rejected-text-color)', 'var(--status-warning-text-color)', 'var(--status-skipped-text-color)', 'var(--brand-color)'];
|
|
21290
|
+
const DashboardDonutChart = ({
|
|
21291
|
+
radius = 60,
|
|
21292
|
+
lineWidth = 15,
|
|
21293
|
+
statusValues = [],
|
|
21294
|
+
gapAngle = 0,
|
|
21295
|
+
legendDetailsType = '',
|
|
21296
|
+
isLegendDetails = true,
|
|
21297
|
+
legendType = 'numberLegend',
|
|
21298
|
+
showOnlyLabel = false
|
|
21299
|
+
}) => {
|
|
21300
|
+
const [hoveredItemIndex, setHoveredItemIndex] = React.useState(null);
|
|
21301
|
+
const [tooltipPosition, setTooltipPosition] = React.useState({
|
|
21302
|
+
x: 0,
|
|
21303
|
+
y: 0
|
|
21304
|
+
});
|
|
21305
|
+
const [showTooltip, setShowTooltip] = React.useState(false);
|
|
21306
|
+
const total = statusValues?.reduce((acc, {
|
|
21307
|
+
value
|
|
21308
|
+
}) => acc + value, 0);
|
|
21309
|
+
const nonZeroValues = statusValues?.filter(({
|
|
21310
|
+
value
|
|
21311
|
+
}) => value > 0);
|
|
21312
|
+
// Calculate angles and gaps
|
|
21313
|
+
const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
|
|
21314
|
+
let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
|
|
21315
|
+
let currentAngle = Math.PI / 2;
|
|
21316
|
+
const MIN_PERCENTAGE = 1;
|
|
21317
|
+
const MIN_ANGLE = MIN_PERCENTAGE / 100 * (2 * Math.PI);
|
|
21318
|
+
// Adjust for small angles
|
|
21319
|
+
nonZeroValues.forEach(({
|
|
21320
|
+
value
|
|
21321
|
+
}) => {
|
|
21322
|
+
const valuePercentage = value / total;
|
|
21323
|
+
const angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
|
|
21324
|
+
remainingAngle -= angle;
|
|
21325
|
+
});
|
|
21326
|
+
const handleMouseEnter = itemIndex => {
|
|
21327
|
+
setHoveredItemIndex(itemIndex);
|
|
21328
|
+
setShowTooltip(true);
|
|
21329
|
+
};
|
|
21330
|
+
const handleMouseLeave = () => {
|
|
21331
|
+
setTooltipPosition({
|
|
21332
|
+
x: 0,
|
|
21333
|
+
y: 0
|
|
21334
|
+
});
|
|
21335
|
+
setHoveredItemIndex(null);
|
|
21336
|
+
setShowTooltip(false);
|
|
21337
|
+
};
|
|
21338
|
+
const handleMouseMove = event => {
|
|
21339
|
+
setTooltipPosition({
|
|
21340
|
+
x: event.clientX + 10,
|
|
21341
|
+
y: event.clientY + 10
|
|
21342
|
+
});
|
|
21343
|
+
};
|
|
21344
|
+
const SVG_PADDING = 4;
|
|
21345
|
+
const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
|
|
21346
|
+
const renderArc = (chartItem, endAngle, i) => {
|
|
21347
|
+
const isFullCircle = nonZeroValues.length === 1;
|
|
21348
|
+
// Full circle handling
|
|
21349
|
+
const foregroundArcPath = isFullCircle ? calculateArc(0, 0, radius, 0, 2 * Math.PI) : calculateArc(0, 0, radius, currentAngle, endAngle);
|
|
21350
|
+
currentAngle = endAngle + gapAngle;
|
|
21351
|
+
return jsxRuntime.jsx("g", {
|
|
21352
|
+
children: jsxRuntime.jsx("path", {
|
|
21353
|
+
d: foregroundArcPath,
|
|
21354
|
+
fill: "none",
|
|
21355
|
+
stroke: chartItem?.color ? chartItem.color : colorMapping[i % colorMapping.length],
|
|
21356
|
+
strokeWidth: lineWidth,
|
|
21357
|
+
onMouseEnter: () => handleMouseEnter(i),
|
|
21358
|
+
onMouseLeave: handleMouseLeave,
|
|
21359
|
+
strokeOpacity: 0.8,
|
|
21360
|
+
onMouseMove: handleMouseMove
|
|
21361
|
+
})
|
|
21362
|
+
}, i);
|
|
21363
|
+
};
|
|
21364
|
+
const renderTooltip = () => {
|
|
21365
|
+
return jsxRuntime.jsxs("div", {
|
|
21366
|
+
className: "ff-donut-chart-tooltip",
|
|
21367
|
+
style: {
|
|
21368
|
+
left: tooltipPosition.x,
|
|
21369
|
+
top: tooltipPosition.y
|
|
21370
|
+
},
|
|
21371
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
21372
|
+
fontSize: 12,
|
|
21373
|
+
children: hoveredItemIndex !== null && `${nonZeroValues[hoveredItemIndex]?.key} : `
|
|
21374
|
+
}), jsxRuntime.jsx(Typography, {
|
|
21375
|
+
fontSize: 12,
|
|
21376
|
+
children: hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex]?.value
|
|
21377
|
+
})]
|
|
21378
|
+
});
|
|
21379
|
+
};
|
|
21380
|
+
const renderLegend = (legendData, legendType) => {
|
|
21381
|
+
switch (legendType) {
|
|
21382
|
+
case 'numberLegend':
|
|
21383
|
+
return jsxRuntime.jsx("div", {
|
|
21384
|
+
className: "ff-legend-container numberLegend",
|
|
21385
|
+
children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
|
|
21386
|
+
className: "ff-legend-item",
|
|
21387
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
21388
|
+
fontSize: 22,
|
|
21389
|
+
fontWeight: "semi-bold",
|
|
21390
|
+
className: "ff-legend-value",
|
|
21391
|
+
color: item.color ? item.color : colorMapping[index % colorMapping.length],
|
|
21392
|
+
children: item.value
|
|
21393
|
+
}), jsxRuntime.jsx(Typography, {
|
|
21394
|
+
fontSize: 12,
|
|
21395
|
+
className: "ff-legend-key",
|
|
21396
|
+
children: item.key
|
|
21397
|
+
})]
|
|
21398
|
+
}, index))
|
|
21399
|
+
});
|
|
21400
|
+
case 'pillLegend':
|
|
21401
|
+
return jsxRuntime.jsx("div", {
|
|
21402
|
+
className: "ff-legend-container pillLegend",
|
|
21403
|
+
children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
|
|
21404
|
+
className: "ff-legend-item",
|
|
21405
|
+
children: [jsxRuntime.jsx("span", {
|
|
21406
|
+
className: "ff-legend-capsule",
|
|
21407
|
+
style: {
|
|
21408
|
+
backgroundColor: item.color ? item.color : colorMapping[index % colorMapping.length]
|
|
21409
|
+
},
|
|
21410
|
+
children: jsxRuntime.jsx(Typography, {
|
|
21411
|
+
fontSize: 10,
|
|
21412
|
+
children: item.value
|
|
21413
|
+
})
|
|
21414
|
+
}), jsxRuntime.jsx(Typography, {
|
|
21415
|
+
className: "ff-legend-key",
|
|
21416
|
+
children: item.key
|
|
21417
|
+
})]
|
|
21418
|
+
}, index))
|
|
21419
|
+
});
|
|
21420
|
+
case 'memoryLegend':
|
|
21421
|
+
return jsxRuntime.jsx("div", {
|
|
21422
|
+
className: "ff-legend-container memoryLegend",
|
|
21423
|
+
children: legendData.map((item, index) => jsxRuntime.jsx(React.Fragment, {
|
|
21424
|
+
children: jsxRuntime.jsxs("div", {
|
|
21425
|
+
className: "ff-legend-item",
|
|
21426
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
21427
|
+
fontSize: 22,
|
|
21428
|
+
fontWeight: "medium",
|
|
21429
|
+
className: "ff-legend-value",
|
|
21430
|
+
color: item.color ? item.color : colorMapping[index % colorMapping.length],
|
|
21431
|
+
children: item.value
|
|
21432
|
+
}), jsxRuntime.jsx(Typography, {
|
|
21433
|
+
className: "ff-legend-key",
|
|
21434
|
+
children: item.key
|
|
21435
|
+
})]
|
|
21436
|
+
})
|
|
21437
|
+
}, index))
|
|
21438
|
+
});
|
|
21439
|
+
case 'tableLegend':
|
|
21440
|
+
return jsxRuntime.jsx("div", {
|
|
21441
|
+
className: "ff-legend-table-wrapper",
|
|
21442
|
+
children: jsxRuntime.jsxs("table", {
|
|
21443
|
+
className: "ff-legend-table tableLegend",
|
|
21444
|
+
children: [jsxRuntime.jsx("thead", {
|
|
21445
|
+
children: jsxRuntime.jsxs("tr", {
|
|
21446
|
+
children: [jsxRuntime.jsx("th", {
|
|
21447
|
+
className: "ff-table-header",
|
|
21448
|
+
children: "Name"
|
|
21449
|
+
}), jsxRuntime.jsx("th", {
|
|
21450
|
+
className: "ff-table-header",
|
|
21451
|
+
children: "%"
|
|
21452
|
+
}), jsxRuntime.jsx("th", {
|
|
21453
|
+
className: "ff-table-header",
|
|
21454
|
+
children: "Count"
|
|
21455
|
+
})]
|
|
21456
|
+
})
|
|
21457
|
+
}), jsxRuntime.jsx("tbody", {
|
|
21458
|
+
children: legendData.map((item, index) => jsxRuntime.jsxs("tr", {
|
|
21459
|
+
className: "ff-legend-item",
|
|
21460
|
+
onMouseEnter: () => setHoveredItemIndex(index),
|
|
21461
|
+
onMouseLeave: () => setHoveredItemIndex(null),
|
|
21462
|
+
children: [jsxRuntime.jsxs("td", {
|
|
21463
|
+
className: "ff-legend-name",
|
|
21464
|
+
children: [jsxRuntime.jsx("span", {
|
|
21465
|
+
className: "ff-legend-capsule",
|
|
21466
|
+
style: {
|
|
21467
|
+
backgroundColor: item.color ? item.color : colorMapping[index % colorMapping.length]
|
|
21468
|
+
},
|
|
21469
|
+
children: jsxRuntime.jsx(Typography, {
|
|
21470
|
+
fontSize: 10,
|
|
21471
|
+
children: item.value
|
|
21472
|
+
})
|
|
21473
|
+
}), jsxRuntime.jsx(Typography, {
|
|
21474
|
+
fontSize: 10,
|
|
21475
|
+
children: item.key
|
|
21476
|
+
})]
|
|
21477
|
+
}), jsxRuntime.jsx("td", {
|
|
21478
|
+
className: "ff-legend-percentage",
|
|
21479
|
+
children: (item.value / total * 100).toFixed(1)
|
|
21480
|
+
}), jsxRuntime.jsx("td", {
|
|
21481
|
+
className: "ff-legend-count",
|
|
21482
|
+
children: item.value
|
|
21483
|
+
})]
|
|
21484
|
+
}, index))
|
|
21485
|
+
})]
|
|
21486
|
+
})
|
|
21487
|
+
});
|
|
21488
|
+
default:
|
|
21489
|
+
return null;
|
|
21490
|
+
}
|
|
21491
|
+
};
|
|
21492
|
+
return jsxRuntime.jsxs("div", {
|
|
21493
|
+
className: classNames('ff-dashboard-donut-chart-section', {
|
|
21494
|
+
'ff-dashboard-donut-chart-section-table-legend': legendType === 'tableLegend'
|
|
21495
|
+
}),
|
|
21496
|
+
children: [jsxRuntime.jsxs("div", {
|
|
21497
|
+
className: "ff-dashboard-donut-chart-svg-container",
|
|
21498
|
+
children: [jsxRuntime.jsx("svg", {
|
|
21499
|
+
width: DONUT_SVG_SIZE,
|
|
21500
|
+
height: DONUT_SVG_SIZE,
|
|
21501
|
+
viewBox: `0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`,
|
|
21502
|
+
children: jsxRuntime.jsxs("g", {
|
|
21503
|
+
transform: `translate(${radius + lineWidth + SVG_PADDING}, ${radius + lineWidth + SVG_PADDING})`,
|
|
21504
|
+
children: [nonZeroValues?.map((status, i) => {
|
|
21505
|
+
const valuePercentage = status.value / total;
|
|
21506
|
+
let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
|
|
21507
|
+
angle += remainingAngle * (valuePercentage / total);
|
|
21508
|
+
const endAngle = currentAngle + angle;
|
|
21509
|
+
return renderArc(status, endAngle, i);
|
|
21510
|
+
}), showOnlyLabel ? jsxRuntime.jsx("text", {
|
|
21511
|
+
x: "0",
|
|
21512
|
+
y: "5",
|
|
21513
|
+
className: "ff-svg-label-text",
|
|
21514
|
+
textAnchor: "middle",
|
|
21515
|
+
fill: colorMapping[3],
|
|
21516
|
+
children: legendDetailsType
|
|
21517
|
+
}) : (legendType !== 'tableLegend' || hoveredItemIndex !== null) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
21518
|
+
children: [jsxRuntime.jsx("text", {
|
|
21519
|
+
x: "0",
|
|
21520
|
+
y: "5",
|
|
21521
|
+
textAnchor: "middle",
|
|
21522
|
+
fill: colorMapping[3],
|
|
21523
|
+
children: legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? `${(nonZeroValues[hoveredItemIndex].value / total * 100).toFixed(1)}%` : total
|
|
21524
|
+
}), jsxRuntime.jsx("text", {
|
|
21525
|
+
x: "0",
|
|
21526
|
+
y: "26",
|
|
21527
|
+
textAnchor: "middle",
|
|
21528
|
+
fill: "var(--text-color)",
|
|
21529
|
+
children: legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? nonZeroValues[hoveredItemIndex].key : legendDetailsType
|
|
21530
|
+
})]
|
|
21531
|
+
})]
|
|
21532
|
+
})
|
|
21533
|
+
}), legendType === 'tableLegend' && jsxRuntime.jsxs("div", {
|
|
21534
|
+
children: [jsxRuntime.jsxs(Typography, {
|
|
21535
|
+
fontWeight: "semi-bold",
|
|
21536
|
+
children: [legendDetailsType, " "]
|
|
21537
|
+
}), jsxRuntime.jsxs(Typography, {
|
|
21538
|
+
children: [" ", `Total ${legendDetailsType} - ${total}`, " "]
|
|
21539
|
+
})]
|
|
21540
|
+
}), showTooltip && renderTooltip()]
|
|
21541
|
+
}), isLegendDetails && renderLegend(nonZeroValues, legendType)]
|
|
21542
|
+
});
|
|
21543
|
+
};
|
|
21544
|
+
|
|
21081
21545
|
var propTypes = {exports: {}};
|
|
21082
21546
|
|
|
21083
|
-
var reactIs
|
|
21547
|
+
var reactIs = {exports: {}};
|
|
21084
21548
|
|
|
21085
|
-
var reactIs_production_min
|
|
21549
|
+
var reactIs_production_min = {};
|
|
21086
21550
|
|
|
21087
21551
|
/** @license React v16.13.1
|
|
21088
21552
|
* react-is.production.min.js
|
|
@@ -21092,10 +21556,10 @@ var reactIs_production_min$1 = {};
|
|
|
21092
21556
|
* This source code is licensed under the MIT license found in the
|
|
21093
21557
|
* LICENSE file in the root directory of this source tree.
|
|
21094
21558
|
*/
|
|
21095
|
-
var hasRequiredReactIs_production_min
|
|
21096
|
-
function requireReactIs_production_min
|
|
21097
|
-
if (hasRequiredReactIs_production_min
|
|
21098
|
-
hasRequiredReactIs_production_min
|
|
21559
|
+
var hasRequiredReactIs_production_min;
|
|
21560
|
+
function requireReactIs_production_min() {
|
|
21561
|
+
if (hasRequiredReactIs_production_min) return reactIs_production_min;
|
|
21562
|
+
hasRequiredReactIs_production_min = 1;
|
|
21099
21563
|
var b = "function" === typeof Symbol && Symbol.for,
|
|
21100
21564
|
c = b ? Symbol.for("react.element") : 60103,
|
|
21101
21565
|
d = b ? Symbol.for("react.portal") : 60106,
|
|
@@ -21148,64 +21612,64 @@ function requireReactIs_production_min$1() {
|
|
|
21148
21612
|
function A(a) {
|
|
21149
21613
|
return z(a) === m;
|
|
21150
21614
|
}
|
|
21151
|
-
reactIs_production_min
|
|
21152
|
-
reactIs_production_min
|
|
21153
|
-
reactIs_production_min
|
|
21154
|
-
reactIs_production_min
|
|
21155
|
-
reactIs_production_min
|
|
21156
|
-
reactIs_production_min
|
|
21157
|
-
reactIs_production_min
|
|
21158
|
-
reactIs_production_min
|
|
21159
|
-
reactIs_production_min
|
|
21160
|
-
reactIs_production_min
|
|
21161
|
-
reactIs_production_min
|
|
21162
|
-
reactIs_production_min
|
|
21163
|
-
reactIs_production_min
|
|
21164
|
-
reactIs_production_min
|
|
21615
|
+
reactIs_production_min.AsyncMode = l;
|
|
21616
|
+
reactIs_production_min.ConcurrentMode = m;
|
|
21617
|
+
reactIs_production_min.ContextConsumer = k;
|
|
21618
|
+
reactIs_production_min.ContextProvider = h;
|
|
21619
|
+
reactIs_production_min.Element = c;
|
|
21620
|
+
reactIs_production_min.ForwardRef = n;
|
|
21621
|
+
reactIs_production_min.Fragment = e;
|
|
21622
|
+
reactIs_production_min.Lazy = t;
|
|
21623
|
+
reactIs_production_min.Memo = r;
|
|
21624
|
+
reactIs_production_min.Portal = d;
|
|
21625
|
+
reactIs_production_min.Profiler = g;
|
|
21626
|
+
reactIs_production_min.StrictMode = f;
|
|
21627
|
+
reactIs_production_min.Suspense = p;
|
|
21628
|
+
reactIs_production_min.isAsyncMode = function (a) {
|
|
21165
21629
|
return A(a) || z(a) === l;
|
|
21166
21630
|
};
|
|
21167
|
-
reactIs_production_min
|
|
21168
|
-
reactIs_production_min
|
|
21631
|
+
reactIs_production_min.isConcurrentMode = A;
|
|
21632
|
+
reactIs_production_min.isContextConsumer = function (a) {
|
|
21169
21633
|
return z(a) === k;
|
|
21170
21634
|
};
|
|
21171
|
-
reactIs_production_min
|
|
21635
|
+
reactIs_production_min.isContextProvider = function (a) {
|
|
21172
21636
|
return z(a) === h;
|
|
21173
21637
|
};
|
|
21174
|
-
reactIs_production_min
|
|
21638
|
+
reactIs_production_min.isElement = function (a) {
|
|
21175
21639
|
return "object" === typeof a && null !== a && a.$$typeof === c;
|
|
21176
21640
|
};
|
|
21177
|
-
reactIs_production_min
|
|
21641
|
+
reactIs_production_min.isForwardRef = function (a) {
|
|
21178
21642
|
return z(a) === n;
|
|
21179
21643
|
};
|
|
21180
|
-
reactIs_production_min
|
|
21644
|
+
reactIs_production_min.isFragment = function (a) {
|
|
21181
21645
|
return z(a) === e;
|
|
21182
21646
|
};
|
|
21183
|
-
reactIs_production_min
|
|
21647
|
+
reactIs_production_min.isLazy = function (a) {
|
|
21184
21648
|
return z(a) === t;
|
|
21185
21649
|
};
|
|
21186
|
-
reactIs_production_min
|
|
21650
|
+
reactIs_production_min.isMemo = function (a) {
|
|
21187
21651
|
return z(a) === r;
|
|
21188
21652
|
};
|
|
21189
|
-
reactIs_production_min
|
|
21653
|
+
reactIs_production_min.isPortal = function (a) {
|
|
21190
21654
|
return z(a) === d;
|
|
21191
21655
|
};
|
|
21192
|
-
reactIs_production_min
|
|
21656
|
+
reactIs_production_min.isProfiler = function (a) {
|
|
21193
21657
|
return z(a) === g;
|
|
21194
21658
|
};
|
|
21195
|
-
reactIs_production_min
|
|
21659
|
+
reactIs_production_min.isStrictMode = function (a) {
|
|
21196
21660
|
return z(a) === f;
|
|
21197
21661
|
};
|
|
21198
|
-
reactIs_production_min
|
|
21662
|
+
reactIs_production_min.isSuspense = function (a) {
|
|
21199
21663
|
return z(a) === p;
|
|
21200
21664
|
};
|
|
21201
|
-
reactIs_production_min
|
|
21665
|
+
reactIs_production_min.isValidElementType = function (a) {
|
|
21202
21666
|
return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
|
|
21203
21667
|
};
|
|
21204
|
-
reactIs_production_min
|
|
21205
|
-
return reactIs_production_min
|
|
21668
|
+
reactIs_production_min.typeOf = z;
|
|
21669
|
+
return reactIs_production_min;
|
|
21206
21670
|
}
|
|
21207
21671
|
|
|
21208
|
-
var reactIs_development
|
|
21672
|
+
var reactIs_development = {};
|
|
21209
21673
|
|
|
21210
21674
|
/** @license React v16.13.1
|
|
21211
21675
|
* react-is.development.js
|
|
@@ -21215,10 +21679,10 @@ var reactIs_development$1 = {};
|
|
|
21215
21679
|
* This source code is licensed under the MIT license found in the
|
|
21216
21680
|
* LICENSE file in the root directory of this source tree.
|
|
21217
21681
|
*/
|
|
21218
|
-
var hasRequiredReactIs_development
|
|
21219
|
-
function requireReactIs_development
|
|
21220
|
-
if (hasRequiredReactIs_development
|
|
21221
|
-
hasRequiredReactIs_development
|
|
21682
|
+
var hasRequiredReactIs_development;
|
|
21683
|
+
function requireReactIs_development() {
|
|
21684
|
+
if (hasRequiredReactIs_development) return reactIs_development;
|
|
21685
|
+
hasRequiredReactIs_development = 1;
|
|
21222
21686
|
if (process.env.NODE_ENV !== "production") {
|
|
21223
21687
|
(function () {
|
|
21224
21688
|
|
|
@@ -21345,49 +21809,49 @@ function requireReactIs_development$1() {
|
|
|
21345
21809
|
function isSuspense(object) {
|
|
21346
21810
|
return typeOf(object) === REACT_SUSPENSE_TYPE;
|
|
21347
21811
|
}
|
|
21348
|
-
reactIs_development
|
|
21349
|
-
reactIs_development
|
|
21350
|
-
reactIs_development
|
|
21351
|
-
reactIs_development
|
|
21352
|
-
reactIs_development
|
|
21353
|
-
reactIs_development
|
|
21354
|
-
reactIs_development
|
|
21355
|
-
reactIs_development
|
|
21356
|
-
reactIs_development
|
|
21357
|
-
reactIs_development
|
|
21358
|
-
reactIs_development
|
|
21359
|
-
reactIs_development
|
|
21360
|
-
reactIs_development
|
|
21361
|
-
reactIs_development
|
|
21362
|
-
reactIs_development
|
|
21363
|
-
reactIs_development
|
|
21364
|
-
reactIs_development
|
|
21365
|
-
reactIs_development
|
|
21366
|
-
reactIs_development
|
|
21367
|
-
reactIs_development
|
|
21368
|
-
reactIs_development
|
|
21369
|
-
reactIs_development
|
|
21370
|
-
reactIs_development
|
|
21371
|
-
reactIs_development
|
|
21372
|
-
reactIs_development
|
|
21373
|
-
reactIs_development
|
|
21374
|
-
reactIs_development
|
|
21375
|
-
reactIs_development
|
|
21812
|
+
reactIs_development.AsyncMode = AsyncMode;
|
|
21813
|
+
reactIs_development.ConcurrentMode = ConcurrentMode;
|
|
21814
|
+
reactIs_development.ContextConsumer = ContextConsumer;
|
|
21815
|
+
reactIs_development.ContextProvider = ContextProvider;
|
|
21816
|
+
reactIs_development.Element = Element;
|
|
21817
|
+
reactIs_development.ForwardRef = ForwardRef;
|
|
21818
|
+
reactIs_development.Fragment = Fragment;
|
|
21819
|
+
reactIs_development.Lazy = Lazy;
|
|
21820
|
+
reactIs_development.Memo = Memo;
|
|
21821
|
+
reactIs_development.Portal = Portal;
|
|
21822
|
+
reactIs_development.Profiler = Profiler;
|
|
21823
|
+
reactIs_development.StrictMode = StrictMode;
|
|
21824
|
+
reactIs_development.Suspense = Suspense;
|
|
21825
|
+
reactIs_development.isAsyncMode = isAsyncMode;
|
|
21826
|
+
reactIs_development.isConcurrentMode = isConcurrentMode;
|
|
21827
|
+
reactIs_development.isContextConsumer = isContextConsumer;
|
|
21828
|
+
reactIs_development.isContextProvider = isContextProvider;
|
|
21829
|
+
reactIs_development.isElement = isElement;
|
|
21830
|
+
reactIs_development.isForwardRef = isForwardRef;
|
|
21831
|
+
reactIs_development.isFragment = isFragment;
|
|
21832
|
+
reactIs_development.isLazy = isLazy;
|
|
21833
|
+
reactIs_development.isMemo = isMemo;
|
|
21834
|
+
reactIs_development.isPortal = isPortal;
|
|
21835
|
+
reactIs_development.isProfiler = isProfiler;
|
|
21836
|
+
reactIs_development.isStrictMode = isStrictMode;
|
|
21837
|
+
reactIs_development.isSuspense = isSuspense;
|
|
21838
|
+
reactIs_development.isValidElementType = isValidElementType;
|
|
21839
|
+
reactIs_development.typeOf = typeOf;
|
|
21376
21840
|
})();
|
|
21377
21841
|
}
|
|
21378
|
-
return reactIs_development
|
|
21842
|
+
return reactIs_development;
|
|
21379
21843
|
}
|
|
21380
21844
|
|
|
21381
|
-
var hasRequiredReactIs
|
|
21382
|
-
function requireReactIs
|
|
21383
|
-
if (hasRequiredReactIs
|
|
21384
|
-
hasRequiredReactIs
|
|
21845
|
+
var hasRequiredReactIs;
|
|
21846
|
+
function requireReactIs() {
|
|
21847
|
+
if (hasRequiredReactIs) return reactIs.exports;
|
|
21848
|
+
hasRequiredReactIs = 1;
|
|
21385
21849
|
if (process.env.NODE_ENV === 'production') {
|
|
21386
|
-
reactIs
|
|
21850
|
+
reactIs.exports = requireReactIs_production_min();
|
|
21387
21851
|
} else {
|
|
21388
|
-
reactIs
|
|
21852
|
+
reactIs.exports = requireReactIs_development();
|
|
21389
21853
|
}
|
|
21390
|
-
return reactIs
|
|
21854
|
+
return reactIs.exports;
|
|
21391
21855
|
}
|
|
21392
21856
|
|
|
21393
21857
|
/*
|
|
@@ -21602,7 +22066,7 @@ var hasRequiredFactoryWithTypeCheckers;
|
|
|
21602
22066
|
function requireFactoryWithTypeCheckers() {
|
|
21603
22067
|
if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
|
|
21604
22068
|
hasRequiredFactoryWithTypeCheckers = 1;
|
|
21605
|
-
var ReactIs = requireReactIs
|
|
22069
|
+
var ReactIs = requireReactIs();
|
|
21606
22070
|
var assign = requireObjectAssign();
|
|
21607
22071
|
var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
|
|
21608
22072
|
var has = /*@__PURE__*/requireHas();
|
|
@@ -22215,7 +22679,7 @@ function requirePropTypes() {
|
|
|
22215
22679
|
if (hasRequiredPropTypes) return propTypes.exports;
|
|
22216
22680
|
hasRequiredPropTypes = 1;
|
|
22217
22681
|
if (process.env.NODE_ENV !== 'production') {
|
|
22218
|
-
var ReactIs = requireReactIs
|
|
22682
|
+
var ReactIs = requireReactIs();
|
|
22219
22683
|
|
|
22220
22684
|
// By explicitly using `prop-types` you are opting into new development behavior.
|
|
22221
22685
|
// http://fb.me/prop-types-in-prod
|
|
@@ -22450,411 +22914,101 @@ ReCAPTCHA.defaultProps = {
|
|
|
22450
22914
|
badge: "bottomright"
|
|
22451
22915
|
};
|
|
22452
22916
|
|
|
22453
|
-
var
|
|
22454
|
-
|
|
22455
|
-
|
|
22917
|
+
var hoistNonReactStatics_cjs;
|
|
22918
|
+
var hasRequiredHoistNonReactStatics_cjs;
|
|
22919
|
+
function requireHoistNonReactStatics_cjs() {
|
|
22920
|
+
if (hasRequiredHoistNonReactStatics_cjs) return hoistNonReactStatics_cjs;
|
|
22921
|
+
hasRequiredHoistNonReactStatics_cjs = 1;
|
|
22922
|
+
var reactIs = requireReactIs();
|
|
22456
22923
|
|
|
22457
|
-
/**
|
|
22458
|
-
|
|
22459
|
-
|
|
22460
|
-
|
|
22461
|
-
|
|
22462
|
-
|
|
22463
|
-
|
|
22464
|
-
|
|
22465
|
-
|
|
22466
|
-
|
|
22467
|
-
|
|
22468
|
-
|
|
22469
|
-
|
|
22470
|
-
|
|
22471
|
-
|
|
22472
|
-
|
|
22473
|
-
f = b ? Symbol.for("react.strict_mode") : 60108,
|
|
22474
|
-
g = b ? Symbol.for("react.profiler") : 60114,
|
|
22475
|
-
h = b ? Symbol.for("react.provider") : 60109,
|
|
22476
|
-
k = b ? Symbol.for("react.context") : 60110,
|
|
22477
|
-
l = b ? Symbol.for("react.async_mode") : 60111,
|
|
22478
|
-
m = b ? Symbol.for("react.concurrent_mode") : 60111,
|
|
22479
|
-
n = b ? Symbol.for("react.forward_ref") : 60112,
|
|
22480
|
-
p = b ? Symbol.for("react.suspense") : 60113,
|
|
22481
|
-
q = b ? Symbol.for("react.suspense_list") : 60120,
|
|
22482
|
-
r = b ? Symbol.for("react.memo") : 60115,
|
|
22483
|
-
t = b ? Symbol.for("react.lazy") : 60116,
|
|
22484
|
-
v = b ? Symbol.for("react.block") : 60121,
|
|
22485
|
-
w = b ? Symbol.for("react.fundamental") : 60117,
|
|
22486
|
-
x = b ? Symbol.for("react.responder") : 60118,
|
|
22487
|
-
y = b ? Symbol.for("react.scope") : 60119;
|
|
22488
|
-
function z(a) {
|
|
22489
|
-
if ("object" === typeof a && null !== a) {
|
|
22490
|
-
var u = a.$$typeof;
|
|
22491
|
-
switch (u) {
|
|
22492
|
-
case c:
|
|
22493
|
-
switch (a = a.type, a) {
|
|
22494
|
-
case l:
|
|
22495
|
-
case m:
|
|
22496
|
-
case e:
|
|
22497
|
-
case g:
|
|
22498
|
-
case f:
|
|
22499
|
-
case p:
|
|
22500
|
-
return a;
|
|
22501
|
-
default:
|
|
22502
|
-
switch (a = a && a.$$typeof, a) {
|
|
22503
|
-
case k:
|
|
22504
|
-
case n:
|
|
22505
|
-
case t:
|
|
22506
|
-
case r:
|
|
22507
|
-
case h:
|
|
22508
|
-
return a;
|
|
22509
|
-
default:
|
|
22510
|
-
return u;
|
|
22511
|
-
}
|
|
22512
|
-
}
|
|
22513
|
-
case d:
|
|
22514
|
-
return u;
|
|
22515
|
-
}
|
|
22516
|
-
}
|
|
22517
|
-
}
|
|
22518
|
-
function A(a) {
|
|
22519
|
-
return z(a) === m;
|
|
22520
|
-
}
|
|
22521
|
-
reactIs_production_min.AsyncMode = l;
|
|
22522
|
-
reactIs_production_min.ConcurrentMode = m;
|
|
22523
|
-
reactIs_production_min.ContextConsumer = k;
|
|
22524
|
-
reactIs_production_min.ContextProvider = h;
|
|
22525
|
-
reactIs_production_min.Element = c;
|
|
22526
|
-
reactIs_production_min.ForwardRef = n;
|
|
22527
|
-
reactIs_production_min.Fragment = e;
|
|
22528
|
-
reactIs_production_min.Lazy = t;
|
|
22529
|
-
reactIs_production_min.Memo = r;
|
|
22530
|
-
reactIs_production_min.Portal = d;
|
|
22531
|
-
reactIs_production_min.Profiler = g;
|
|
22532
|
-
reactIs_production_min.StrictMode = f;
|
|
22533
|
-
reactIs_production_min.Suspense = p;
|
|
22534
|
-
reactIs_production_min.isAsyncMode = function (a) {
|
|
22535
|
-
return A(a) || z(a) === l;
|
|
22536
|
-
};
|
|
22537
|
-
reactIs_production_min.isConcurrentMode = A;
|
|
22538
|
-
reactIs_production_min.isContextConsumer = function (a) {
|
|
22539
|
-
return z(a) === k;
|
|
22540
|
-
};
|
|
22541
|
-
reactIs_production_min.isContextProvider = function (a) {
|
|
22542
|
-
return z(a) === h;
|
|
22543
|
-
};
|
|
22544
|
-
reactIs_production_min.isElement = function (a) {
|
|
22545
|
-
return "object" === typeof a && null !== a && a.$$typeof === c;
|
|
22546
|
-
};
|
|
22547
|
-
reactIs_production_min.isForwardRef = function (a) {
|
|
22548
|
-
return z(a) === n;
|
|
22549
|
-
};
|
|
22550
|
-
reactIs_production_min.isFragment = function (a) {
|
|
22551
|
-
return z(a) === e;
|
|
22552
|
-
};
|
|
22553
|
-
reactIs_production_min.isLazy = function (a) {
|
|
22554
|
-
return z(a) === t;
|
|
22555
|
-
};
|
|
22556
|
-
reactIs_production_min.isMemo = function (a) {
|
|
22557
|
-
return z(a) === r;
|
|
22558
|
-
};
|
|
22559
|
-
reactIs_production_min.isPortal = function (a) {
|
|
22560
|
-
return z(a) === d;
|
|
22561
|
-
};
|
|
22562
|
-
reactIs_production_min.isProfiler = function (a) {
|
|
22563
|
-
return z(a) === g;
|
|
22924
|
+
/**
|
|
22925
|
+
* Copyright 2015, Yahoo! Inc.
|
|
22926
|
+
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
|
|
22927
|
+
*/
|
|
22928
|
+
var REACT_STATICS = {
|
|
22929
|
+
childContextTypes: true,
|
|
22930
|
+
contextType: true,
|
|
22931
|
+
contextTypes: true,
|
|
22932
|
+
defaultProps: true,
|
|
22933
|
+
displayName: true,
|
|
22934
|
+
getDefaultProps: true,
|
|
22935
|
+
getDerivedStateFromError: true,
|
|
22936
|
+
getDerivedStateFromProps: true,
|
|
22937
|
+
mixins: true,
|
|
22938
|
+
propTypes: true,
|
|
22939
|
+
type: true
|
|
22564
22940
|
};
|
|
22565
|
-
|
|
22566
|
-
|
|
22941
|
+
var KNOWN_STATICS = {
|
|
22942
|
+
name: true,
|
|
22943
|
+
length: true,
|
|
22944
|
+
prototype: true,
|
|
22945
|
+
caller: true,
|
|
22946
|
+
callee: true,
|
|
22947
|
+
arguments: true,
|
|
22948
|
+
arity: true
|
|
22567
22949
|
};
|
|
22568
|
-
|
|
22569
|
-
|
|
22950
|
+
var FORWARD_REF_STATICS = {
|
|
22951
|
+
'$$typeof': true,
|
|
22952
|
+
render: true,
|
|
22953
|
+
defaultProps: true,
|
|
22954
|
+
displayName: true,
|
|
22955
|
+
propTypes: true
|
|
22570
22956
|
};
|
|
22571
|
-
|
|
22572
|
-
|
|
22957
|
+
var MEMO_STATICS = {
|
|
22958
|
+
'$$typeof': true,
|
|
22959
|
+
compare: true,
|
|
22960
|
+
defaultProps: true,
|
|
22961
|
+
displayName: true,
|
|
22962
|
+
propTypes: true,
|
|
22963
|
+
type: true
|
|
22573
22964
|
};
|
|
22574
|
-
|
|
22575
|
-
|
|
22576
|
-
|
|
22577
|
-
|
|
22578
|
-
|
|
22579
|
-
|
|
22580
|
-
|
|
22581
|
-
|
|
22582
|
-
|
|
22583
|
-
|
|
22584
|
-
|
|
22585
|
-
|
|
22586
|
-
|
|
22587
|
-
|
|
22588
|
-
var
|
|
22589
|
-
|
|
22590
|
-
|
|
22591
|
-
|
|
22592
|
-
|
|
22593
|
-
|
|
22594
|
-
|
|
22595
|
-
|
|
22596
|
-
|
|
22597
|
-
|
|
22598
|
-
|
|
22599
|
-
|
|
22600
|
-
var
|
|
22601
|
-
|
|
22602
|
-
|
|
22603
|
-
|
|
22604
|
-
var
|
|
22605
|
-
|
|
22606
|
-
|
|
22607
|
-
|
|
22608
|
-
|
|
22609
|
-
|
|
22610
|
-
|
|
22611
|
-
|
|
22612
|
-
|
|
22613
|
-
|
|
22614
|
-
|
|
22615
|
-
|
|
22616
|
-
|
|
22617
|
-
|
|
22618
|
-
|
|
22619
|
-
|
|
22620
|
-
|
|
22621
|
-
type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
|
|
22622
|
-
}
|
|
22623
|
-
function typeOf(object) {
|
|
22624
|
-
if (typeof object === 'object' && object !== null) {
|
|
22625
|
-
var $$typeof = object.$$typeof;
|
|
22626
|
-
switch ($$typeof) {
|
|
22627
|
-
case REACT_ELEMENT_TYPE:
|
|
22628
|
-
var type = object.type;
|
|
22629
|
-
switch (type) {
|
|
22630
|
-
case REACT_ASYNC_MODE_TYPE:
|
|
22631
|
-
case REACT_CONCURRENT_MODE_TYPE:
|
|
22632
|
-
case REACT_FRAGMENT_TYPE:
|
|
22633
|
-
case REACT_PROFILER_TYPE:
|
|
22634
|
-
case REACT_STRICT_MODE_TYPE:
|
|
22635
|
-
case REACT_SUSPENSE_TYPE:
|
|
22636
|
-
return type;
|
|
22637
|
-
default:
|
|
22638
|
-
var $$typeofType = type && type.$$typeof;
|
|
22639
|
-
switch ($$typeofType) {
|
|
22640
|
-
case REACT_CONTEXT_TYPE:
|
|
22641
|
-
case REACT_FORWARD_REF_TYPE:
|
|
22642
|
-
case REACT_LAZY_TYPE:
|
|
22643
|
-
case REACT_MEMO_TYPE:
|
|
22644
|
-
case REACT_PROVIDER_TYPE:
|
|
22645
|
-
return $$typeofType;
|
|
22646
|
-
default:
|
|
22647
|
-
return $$typeof;
|
|
22648
|
-
}
|
|
22649
|
-
}
|
|
22650
|
-
case REACT_PORTAL_TYPE:
|
|
22651
|
-
return $$typeof;
|
|
22652
|
-
}
|
|
22653
|
-
}
|
|
22654
|
-
return undefined;
|
|
22655
|
-
} // AsyncMode is deprecated along with isAsyncMode
|
|
22656
|
-
|
|
22657
|
-
var AsyncMode = REACT_ASYNC_MODE_TYPE;
|
|
22658
|
-
var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
|
|
22659
|
-
var ContextConsumer = REACT_CONTEXT_TYPE;
|
|
22660
|
-
var ContextProvider = REACT_PROVIDER_TYPE;
|
|
22661
|
-
var Element = REACT_ELEMENT_TYPE;
|
|
22662
|
-
var ForwardRef = REACT_FORWARD_REF_TYPE;
|
|
22663
|
-
var Fragment = REACT_FRAGMENT_TYPE;
|
|
22664
|
-
var Lazy = REACT_LAZY_TYPE;
|
|
22665
|
-
var Memo = REACT_MEMO_TYPE;
|
|
22666
|
-
var Portal = REACT_PORTAL_TYPE;
|
|
22667
|
-
var Profiler = REACT_PROFILER_TYPE;
|
|
22668
|
-
var StrictMode = REACT_STRICT_MODE_TYPE;
|
|
22669
|
-
var Suspense = REACT_SUSPENSE_TYPE;
|
|
22670
|
-
var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
|
|
22671
|
-
|
|
22672
|
-
function isAsyncMode(object) {
|
|
22673
|
-
{
|
|
22674
|
-
if (!hasWarnedAboutDeprecatedIsAsyncMode) {
|
|
22675
|
-
hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
|
|
22676
|
-
|
|
22677
|
-
console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
|
|
22678
|
-
}
|
|
22679
|
-
}
|
|
22680
|
-
return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
|
|
22681
|
-
}
|
|
22682
|
-
function isConcurrentMode(object) {
|
|
22683
|
-
return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
|
|
22684
|
-
}
|
|
22685
|
-
function isContextConsumer(object) {
|
|
22686
|
-
return typeOf(object) === REACT_CONTEXT_TYPE;
|
|
22687
|
-
}
|
|
22688
|
-
function isContextProvider(object) {
|
|
22689
|
-
return typeOf(object) === REACT_PROVIDER_TYPE;
|
|
22690
|
-
}
|
|
22691
|
-
function isElement(object) {
|
|
22692
|
-
return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
|
|
22693
|
-
}
|
|
22694
|
-
function isForwardRef(object) {
|
|
22695
|
-
return typeOf(object) === REACT_FORWARD_REF_TYPE;
|
|
22696
|
-
}
|
|
22697
|
-
function isFragment(object) {
|
|
22698
|
-
return typeOf(object) === REACT_FRAGMENT_TYPE;
|
|
22699
|
-
}
|
|
22700
|
-
function isLazy(object) {
|
|
22701
|
-
return typeOf(object) === REACT_LAZY_TYPE;
|
|
22702
|
-
}
|
|
22703
|
-
function isMemo(object) {
|
|
22704
|
-
return typeOf(object) === REACT_MEMO_TYPE;
|
|
22705
|
-
}
|
|
22706
|
-
function isPortal(object) {
|
|
22707
|
-
return typeOf(object) === REACT_PORTAL_TYPE;
|
|
22708
|
-
}
|
|
22709
|
-
function isProfiler(object) {
|
|
22710
|
-
return typeOf(object) === REACT_PROFILER_TYPE;
|
|
22711
|
-
}
|
|
22712
|
-
function isStrictMode(object) {
|
|
22713
|
-
return typeOf(object) === REACT_STRICT_MODE_TYPE;
|
|
22714
|
-
}
|
|
22715
|
-
function isSuspense(object) {
|
|
22716
|
-
return typeOf(object) === REACT_SUSPENSE_TYPE;
|
|
22717
|
-
}
|
|
22718
|
-
reactIs_development.AsyncMode = AsyncMode;
|
|
22719
|
-
reactIs_development.ConcurrentMode = ConcurrentMode;
|
|
22720
|
-
reactIs_development.ContextConsumer = ContextConsumer;
|
|
22721
|
-
reactIs_development.ContextProvider = ContextProvider;
|
|
22722
|
-
reactIs_development.Element = Element;
|
|
22723
|
-
reactIs_development.ForwardRef = ForwardRef;
|
|
22724
|
-
reactIs_development.Fragment = Fragment;
|
|
22725
|
-
reactIs_development.Lazy = Lazy;
|
|
22726
|
-
reactIs_development.Memo = Memo;
|
|
22727
|
-
reactIs_development.Portal = Portal;
|
|
22728
|
-
reactIs_development.Profiler = Profiler;
|
|
22729
|
-
reactIs_development.StrictMode = StrictMode;
|
|
22730
|
-
reactIs_development.Suspense = Suspense;
|
|
22731
|
-
reactIs_development.isAsyncMode = isAsyncMode;
|
|
22732
|
-
reactIs_development.isConcurrentMode = isConcurrentMode;
|
|
22733
|
-
reactIs_development.isContextConsumer = isContextConsumer;
|
|
22734
|
-
reactIs_development.isContextProvider = isContextProvider;
|
|
22735
|
-
reactIs_development.isElement = isElement;
|
|
22736
|
-
reactIs_development.isForwardRef = isForwardRef;
|
|
22737
|
-
reactIs_development.isFragment = isFragment;
|
|
22738
|
-
reactIs_development.isLazy = isLazy;
|
|
22739
|
-
reactIs_development.isMemo = isMemo;
|
|
22740
|
-
reactIs_development.isPortal = isPortal;
|
|
22741
|
-
reactIs_development.isProfiler = isProfiler;
|
|
22742
|
-
reactIs_development.isStrictMode = isStrictMode;
|
|
22743
|
-
reactIs_development.isSuspense = isSuspense;
|
|
22744
|
-
reactIs_development.isValidElementType = isValidElementType;
|
|
22745
|
-
reactIs_development.typeOf = typeOf;
|
|
22746
|
-
})();
|
|
22747
|
-
}
|
|
22748
|
-
return reactIs_development;
|
|
22749
|
-
}
|
|
22750
|
-
|
|
22751
|
-
var hasRequiredReactIs;
|
|
22752
|
-
function requireReactIs() {
|
|
22753
|
-
if (hasRequiredReactIs) return reactIs.exports;
|
|
22754
|
-
hasRequiredReactIs = 1;
|
|
22755
|
-
if (process.env.NODE_ENV === 'production') {
|
|
22756
|
-
reactIs.exports = requireReactIs_production_min();
|
|
22757
|
-
} else {
|
|
22758
|
-
reactIs.exports = requireReactIs_development();
|
|
22759
|
-
}
|
|
22760
|
-
return reactIs.exports;
|
|
22761
|
-
}
|
|
22762
|
-
|
|
22763
|
-
var hoistNonReactStatics_cjs;
|
|
22764
|
-
var hasRequiredHoistNonReactStatics_cjs;
|
|
22765
|
-
function requireHoistNonReactStatics_cjs() {
|
|
22766
|
-
if (hasRequiredHoistNonReactStatics_cjs) return hoistNonReactStatics_cjs;
|
|
22767
|
-
hasRequiredHoistNonReactStatics_cjs = 1;
|
|
22768
|
-
var reactIs = requireReactIs();
|
|
22769
|
-
|
|
22770
|
-
/**
|
|
22771
|
-
* Copyright 2015, Yahoo! Inc.
|
|
22772
|
-
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
|
|
22773
|
-
*/
|
|
22774
|
-
var REACT_STATICS = {
|
|
22775
|
-
childContextTypes: true,
|
|
22776
|
-
contextType: true,
|
|
22777
|
-
contextTypes: true,
|
|
22778
|
-
defaultProps: true,
|
|
22779
|
-
displayName: true,
|
|
22780
|
-
getDefaultProps: true,
|
|
22781
|
-
getDerivedStateFromError: true,
|
|
22782
|
-
getDerivedStateFromProps: true,
|
|
22783
|
-
mixins: true,
|
|
22784
|
-
propTypes: true,
|
|
22785
|
-
type: true
|
|
22786
|
-
};
|
|
22787
|
-
var KNOWN_STATICS = {
|
|
22788
|
-
name: true,
|
|
22789
|
-
length: true,
|
|
22790
|
-
prototype: true,
|
|
22791
|
-
caller: true,
|
|
22792
|
-
callee: true,
|
|
22793
|
-
arguments: true,
|
|
22794
|
-
arity: true
|
|
22795
|
-
};
|
|
22796
|
-
var FORWARD_REF_STATICS = {
|
|
22797
|
-
'$$typeof': true,
|
|
22798
|
-
render: true,
|
|
22799
|
-
defaultProps: true,
|
|
22800
|
-
displayName: true,
|
|
22801
|
-
propTypes: true
|
|
22802
|
-
};
|
|
22803
|
-
var MEMO_STATICS = {
|
|
22804
|
-
'$$typeof': true,
|
|
22805
|
-
compare: true,
|
|
22806
|
-
defaultProps: true,
|
|
22807
|
-
displayName: true,
|
|
22808
|
-
propTypes: true,
|
|
22809
|
-
type: true
|
|
22810
|
-
};
|
|
22811
|
-
var TYPE_STATICS = {};
|
|
22812
|
-
TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
|
|
22813
|
-
TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
|
|
22814
|
-
function getStatics(component) {
|
|
22815
|
-
// React v16.11 and below
|
|
22816
|
-
if (reactIs.isMemo(component)) {
|
|
22817
|
-
return MEMO_STATICS;
|
|
22818
|
-
} // React v16.12 and above
|
|
22819
|
-
|
|
22820
|
-
return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
|
|
22821
|
-
}
|
|
22822
|
-
var defineProperty = Object.defineProperty;
|
|
22823
|
-
var getOwnPropertyNames = Object.getOwnPropertyNames;
|
|
22824
|
-
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
|
22825
|
-
var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
|
|
22826
|
-
var getPrototypeOf = Object.getPrototypeOf;
|
|
22827
|
-
var objectPrototype = Object.prototype;
|
|
22828
|
-
function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
|
|
22829
|
-
if (typeof sourceComponent !== 'string') {
|
|
22830
|
-
// don't hoist over string (html) components
|
|
22831
|
-
if (objectPrototype) {
|
|
22832
|
-
var inheritedComponent = getPrototypeOf(sourceComponent);
|
|
22833
|
-
if (inheritedComponent && inheritedComponent !== objectPrototype) {
|
|
22834
|
-
hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
|
|
22835
|
-
}
|
|
22836
|
-
}
|
|
22837
|
-
var keys = getOwnPropertyNames(sourceComponent);
|
|
22838
|
-
if (getOwnPropertySymbols) {
|
|
22839
|
-
keys = keys.concat(getOwnPropertySymbols(sourceComponent));
|
|
22840
|
-
}
|
|
22841
|
-
var targetStatics = getStatics(targetComponent);
|
|
22842
|
-
var sourceStatics = getStatics(sourceComponent);
|
|
22843
|
-
for (var i = 0; i < keys.length; ++i) {
|
|
22844
|
-
var key = keys[i];
|
|
22845
|
-
if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
|
|
22846
|
-
var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
|
|
22847
|
-
try {
|
|
22848
|
-
// Avoid failures from read-only properties
|
|
22849
|
-
defineProperty(targetComponent, key, descriptor);
|
|
22850
|
-
} catch (e) {}
|
|
22851
|
-
}
|
|
22852
|
-
}
|
|
22853
|
-
}
|
|
22854
|
-
return targetComponent;
|
|
22855
|
-
}
|
|
22856
|
-
hoistNonReactStatics_cjs = hoistNonReactStatics;
|
|
22857
|
-
return hoistNonReactStatics_cjs;
|
|
22965
|
+
var TYPE_STATICS = {};
|
|
22966
|
+
TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
|
|
22967
|
+
TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
|
|
22968
|
+
function getStatics(component) {
|
|
22969
|
+
// React v16.11 and below
|
|
22970
|
+
if (reactIs.isMemo(component)) {
|
|
22971
|
+
return MEMO_STATICS;
|
|
22972
|
+
} // React v16.12 and above
|
|
22973
|
+
|
|
22974
|
+
return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
|
|
22975
|
+
}
|
|
22976
|
+
var defineProperty = Object.defineProperty;
|
|
22977
|
+
var getOwnPropertyNames = Object.getOwnPropertyNames;
|
|
22978
|
+
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
|
22979
|
+
var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
|
|
22980
|
+
var getPrototypeOf = Object.getPrototypeOf;
|
|
22981
|
+
var objectPrototype = Object.prototype;
|
|
22982
|
+
function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
|
|
22983
|
+
if (typeof sourceComponent !== 'string') {
|
|
22984
|
+
// don't hoist over string (html) components
|
|
22985
|
+
if (objectPrototype) {
|
|
22986
|
+
var inheritedComponent = getPrototypeOf(sourceComponent);
|
|
22987
|
+
if (inheritedComponent && inheritedComponent !== objectPrototype) {
|
|
22988
|
+
hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
|
|
22989
|
+
}
|
|
22990
|
+
}
|
|
22991
|
+
var keys = getOwnPropertyNames(sourceComponent);
|
|
22992
|
+
if (getOwnPropertySymbols) {
|
|
22993
|
+
keys = keys.concat(getOwnPropertySymbols(sourceComponent));
|
|
22994
|
+
}
|
|
22995
|
+
var targetStatics = getStatics(targetComponent);
|
|
22996
|
+
var sourceStatics = getStatics(sourceComponent);
|
|
22997
|
+
for (var i = 0; i < keys.length; ++i) {
|
|
22998
|
+
var key = keys[i];
|
|
22999
|
+
if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
|
|
23000
|
+
var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
|
|
23001
|
+
try {
|
|
23002
|
+
// Avoid failures from read-only properties
|
|
23003
|
+
defineProperty(targetComponent, key, descriptor);
|
|
23004
|
+
} catch (e) {}
|
|
23005
|
+
}
|
|
23006
|
+
}
|
|
23007
|
+
}
|
|
23008
|
+
return targetComponent;
|
|
23009
|
+
}
|
|
23010
|
+
hoistNonReactStatics_cjs = hoistNonReactStatics;
|
|
23011
|
+
return hoistNonReactStatics_cjs;
|
|
22858
23012
|
}
|
|
22859
23013
|
|
|
22860
23014
|
var hoistNonReactStatics_cjsExports = requireHoistNonReactStatics_cjs();
|
|
@@ -23063,84 +23217,568 @@ function makeAsyncScript(getScriptURL, options) {
|
|
|
23063
23217
|
if (globalName && typeof window !== "undefined") {
|
|
23064
23218
|
childProps[globalName] = typeof window[globalName] !== "undefined" ? window[globalName] : undefined;
|
|
23065
23219
|
}
|
|
23066
|
-
childProps.ref = forwardedRef;
|
|
23067
|
-
return /*#__PURE__*/React.createElement(WrappedComponent, childProps);
|
|
23220
|
+
childProps.ref = forwardedRef;
|
|
23221
|
+
return /*#__PURE__*/React.createElement(WrappedComponent, childProps);
|
|
23222
|
+
};
|
|
23223
|
+
return AsyncScriptLoader;
|
|
23224
|
+
}(React.Component); // Note the second param "ref" provided by React.forwardRef.
|
|
23225
|
+
// We can pass it along to AsyncScriptLoader as a regular prop, e.g. "forwardedRef"
|
|
23226
|
+
// And it can then be attached to the Component.
|
|
23227
|
+
|
|
23228
|
+
var ForwardedComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
23229
|
+
return /*#__PURE__*/React.createElement(AsyncScriptLoader, _extends({}, props, {
|
|
23230
|
+
forwardedRef: ref
|
|
23231
|
+
}));
|
|
23232
|
+
});
|
|
23233
|
+
ForwardedComponent.displayName = "AsyncScriptLoader(" + wrappedComponentName + ")";
|
|
23234
|
+
ForwardedComponent.propTypes = {
|
|
23235
|
+
asyncScriptOnLoad: PropTypes.func
|
|
23236
|
+
};
|
|
23237
|
+
return hoistStatics(ForwardedComponent, WrappedComponent);
|
|
23238
|
+
};
|
|
23239
|
+
}
|
|
23240
|
+
|
|
23241
|
+
var callbackName = "onloadcallback";
|
|
23242
|
+
var globalName = "grecaptcha";
|
|
23243
|
+
function getOptions() {
|
|
23244
|
+
return typeof window !== "undefined" && window.recaptchaOptions || {};
|
|
23245
|
+
}
|
|
23246
|
+
function getURL() {
|
|
23247
|
+
var dynamicOptions = getOptions();
|
|
23248
|
+
var hostname = dynamicOptions.useRecaptchaNet ? "recaptcha.net" : "www.google.com";
|
|
23249
|
+
if (dynamicOptions.enterprise) {
|
|
23250
|
+
return "https://" + hostname + "/recaptcha/enterprise.js?onload=" + callbackName + "&render=explicit";
|
|
23251
|
+
}
|
|
23252
|
+
return "https://" + hostname + "/recaptcha/api.js?onload=" + callbackName + "&render=explicit";
|
|
23253
|
+
}
|
|
23254
|
+
var RecaptchaWrapper = makeAsyncScript(getURL, {
|
|
23255
|
+
callbackName: callbackName,
|
|
23256
|
+
globalName: globalName,
|
|
23257
|
+
attributes: getOptions().nonce ? {
|
|
23258
|
+
nonce: getOptions().nonce
|
|
23259
|
+
} : {}
|
|
23260
|
+
})(ReCAPTCHA);
|
|
23261
|
+
|
|
23262
|
+
var css_248z$2 = ".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}";
|
|
23263
|
+
styleInject(css_248z$2);
|
|
23264
|
+
|
|
23265
|
+
const Recaptcha = /*#__PURE__*/React.forwardRef(({
|
|
23266
|
+
onVerify,
|
|
23267
|
+
className = '',
|
|
23268
|
+
error: externalError,
|
|
23269
|
+
sitekey,
|
|
23270
|
+
...props
|
|
23271
|
+
}, ref) => {
|
|
23272
|
+
const [internalError, setInternalError] = React.useState(null);
|
|
23273
|
+
const handleChange = token => {
|
|
23274
|
+
if (token) {
|
|
23275
|
+
setInternalError(null);
|
|
23276
|
+
onVerify(token);
|
|
23277
|
+
} else {
|
|
23278
|
+
setInternalError('Please complete the CAPTCHA');
|
|
23279
|
+
}
|
|
23280
|
+
};
|
|
23281
|
+
const error = externalError || internalError;
|
|
23282
|
+
return jsxRuntime.jsxs("div", {
|
|
23283
|
+
className: classNames('ff-recaptcha-wrapper', className),
|
|
23284
|
+
children: [jsxRuntime.jsx(RecaptchaWrapper, {
|
|
23285
|
+
ref: ref,
|
|
23286
|
+
sitekey: sitekey,
|
|
23287
|
+
onChange: handleChange,
|
|
23288
|
+
...props
|
|
23289
|
+
}), error && jsxRuntime.jsx("div", {
|
|
23290
|
+
className: "ff-recaptcha-error",
|
|
23291
|
+
children: jsxRuntime.jsx(Typography, {
|
|
23292
|
+
fontSize: 12,
|
|
23293
|
+
children: error
|
|
23294
|
+
})
|
|
23295
|
+
})]
|
|
23296
|
+
});
|
|
23297
|
+
});
|
|
23298
|
+
|
|
23299
|
+
const nlpDropdownDefaultCSSData = {
|
|
23300
|
+
margin: 6,
|
|
23301
|
+
optionHeight: 32,
|
|
23302
|
+
selectInputHeight: 38,
|
|
23303
|
+
dropDownWrapperPadding: 0
|
|
23304
|
+
};
|
|
23305
|
+
|
|
23306
|
+
var css_248z$1 = "@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-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}";
|
|
23307
|
+
styleInject(css_248z$1);
|
|
23308
|
+
|
|
23309
|
+
const NlpDropdown = ({
|
|
23310
|
+
onSelectBlur,
|
|
23311
|
+
onSelectOptionSelector,
|
|
23312
|
+
dropdownPosition,
|
|
23313
|
+
options = [],
|
|
23314
|
+
optionZIndex = 100,
|
|
23315
|
+
inputRef
|
|
23316
|
+
}) => {
|
|
23317
|
+
// const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
|
|
23318
|
+
const [nlpData] = React.useState(null);
|
|
23319
|
+
const themeContext = React.useContext(ThemeContext);
|
|
23320
|
+
const currentTheme = themeContext?.currentTheme;
|
|
23321
|
+
const optionsWrapperRef = React.useRef(null);
|
|
23322
|
+
useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
|
|
23323
|
+
const {
|
|
23324
|
+
positionX,
|
|
23325
|
+
positionY,
|
|
23326
|
+
width,
|
|
23327
|
+
fromBottom
|
|
23328
|
+
} = dropdownPosition;
|
|
23329
|
+
const {
|
|
23330
|
+
margin,
|
|
23331
|
+
optionHeight,
|
|
23332
|
+
selectInputHeight,
|
|
23333
|
+
dropDownWrapperPadding
|
|
23334
|
+
} = nlpDropdownDefaultCSSData;
|
|
23335
|
+
const updateDropdownPosition = () => {
|
|
23336
|
+
let dropdownContainerHeight;
|
|
23337
|
+
if (checkEmpty(options)) {
|
|
23338
|
+
dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
|
|
23339
|
+
} else if (options.length > 5) {
|
|
23340
|
+
dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
|
|
23341
|
+
} else {
|
|
23342
|
+
dropdownContainerHeight = options.length * optionHeight + 2 * dropDownWrapperPadding;
|
|
23343
|
+
}
|
|
23344
|
+
if (fromBottom > dropdownContainerHeight + margin) {
|
|
23345
|
+
return {
|
|
23346
|
+
left: positionX,
|
|
23347
|
+
top: positionY,
|
|
23348
|
+
width: width,
|
|
23349
|
+
zIndex: optionZIndex
|
|
23350
|
+
};
|
|
23351
|
+
}
|
|
23352
|
+
return {
|
|
23353
|
+
zIndex: optionZIndex,
|
|
23354
|
+
left: positionX,
|
|
23355
|
+
width: width,
|
|
23356
|
+
top: positionY - selectInputHeight - dropdownContainerHeight - margin
|
|
23357
|
+
};
|
|
23358
|
+
};
|
|
23359
|
+
return jsxRuntime.jsx("div", {
|
|
23360
|
+
className: "ff-nlp-dropdown-wrapper",
|
|
23361
|
+
children: jsxRuntime.jsxs("div", {
|
|
23362
|
+
ref: optionsWrapperRef,
|
|
23363
|
+
style: updateDropdownPosition(),
|
|
23364
|
+
className: classNames('ff-nlp-options-wrapper', currentTheme),
|
|
23365
|
+
children: [jsxRuntime.jsxs("div", {
|
|
23366
|
+
className: "ff-nlp-options-wrapper1",
|
|
23367
|
+
children: [!checkEmpty(options) ? options.map(option =>
|
|
23368
|
+
// <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
|
|
23369
|
+
jsxRuntime.jsx("div", {
|
|
23370
|
+
children: jsxRuntime.jsxs(Typography, {
|
|
23371
|
+
as: "div",
|
|
23372
|
+
lineHeight: "30px",
|
|
23373
|
+
className: classNames('ff-nlp-option', currentTheme),
|
|
23374
|
+
color: "var(--ff-nlp-text-color)",
|
|
23375
|
+
onClick: () => onSelectOptionSelector(option),
|
|
23376
|
+
children: [jsxRuntime.jsx("span", {
|
|
23377
|
+
className: "mr-2 fontPoppinsRegularMd",
|
|
23378
|
+
children: option?.nlpType === 'NLP' ? jsxRuntime.jsx("b", {
|
|
23379
|
+
className: "nlp-type-NLP",
|
|
23380
|
+
children: "NLP"
|
|
23381
|
+
}) : option?.nlpType === 'STEP_GROUP' ? jsxRuntime.jsx("b", {
|
|
23382
|
+
className: "nlp-type-step-group",
|
|
23383
|
+
children: "SG"
|
|
23384
|
+
}) : option?.nlpType === 'PROGRAM_ELEMENTS' ? jsxRuntime.jsx("b", {
|
|
23385
|
+
className: "nlp-type-program-elements",
|
|
23386
|
+
children: "PE"
|
|
23387
|
+
}) : '--'
|
|
23388
|
+
}), jsxRuntime.jsx("span", {
|
|
23389
|
+
className: "mr-2 fontPoppinsRegularMd",
|
|
23390
|
+
children: option?.platform === 'web' ? jsxRuntime.jsx("b", {
|
|
23391
|
+
className: "platform-web",
|
|
23392
|
+
children: "Web"
|
|
23393
|
+
}) : option?.platform === 'android' ? jsxRuntime.jsx("b", {
|
|
23394
|
+
className: "platform-android",
|
|
23395
|
+
children: "Android"
|
|
23396
|
+
}) : option?.platform === 'ios' ? jsxRuntime.jsx("b", {
|
|
23397
|
+
className: "platform-ios",
|
|
23398
|
+
children: "iOS"
|
|
23399
|
+
}) : option?.platform === 'Generic' ? jsxRuntime.jsx("b", {
|
|
23400
|
+
className: "platform-ios",
|
|
23401
|
+
children: "Generic"
|
|
23402
|
+
}) : '--'
|
|
23403
|
+
}), option?.displayName]
|
|
23404
|
+
})
|
|
23405
|
+
}, ffid())) : jsxRuntime.jsx(Typography, {
|
|
23406
|
+
textAlign: "center",
|
|
23407
|
+
lineHeight: "32px",
|
|
23408
|
+
as: "p",
|
|
23409
|
+
color: "var(--ff-nlp-text-color)",
|
|
23410
|
+
className: "ff-nlp-no-option",
|
|
23411
|
+
children: "No Results Found"
|
|
23412
|
+
}), jsxRuntime.jsx("button", {
|
|
23413
|
+
children: "+ Web Services"
|
|
23414
|
+
})]
|
|
23415
|
+
}), jsxRuntime.jsx("div", {
|
|
23416
|
+
className: "ff-nlp-data",
|
|
23417
|
+
children: jsxRuntime.jsxs("div", {
|
|
23418
|
+
children: [jsxRuntime.jsx("div", {
|
|
23419
|
+
className: "nlp-details-header mt-4",
|
|
23420
|
+
children: "Name:"
|
|
23421
|
+
}), jsxRuntime.jsx("div", {
|
|
23422
|
+
className: "nlp-details nlpdiv-check",
|
|
23423
|
+
children: nlpData?.displayName || '--'
|
|
23424
|
+
}), jsxRuntime.jsx("div", {
|
|
23425
|
+
className: "nlp-details-header mt-4",
|
|
23426
|
+
children: "Description:"
|
|
23427
|
+
}), jsxRuntime.jsx("div", {
|
|
23428
|
+
className: "nlp-details nlpdiv-check",
|
|
23429
|
+
children: nlpData?.description || '--'
|
|
23430
|
+
}), nlpData?.nlpType === 'STEP_GROUP' && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
23431
|
+
children: [jsxRuntime.jsx("div", {
|
|
23432
|
+
className: "nlp-details-header mt-4",
|
|
23433
|
+
children: "Path:"
|
|
23434
|
+
}), jsxRuntime.jsx("div", {
|
|
23435
|
+
className: "nlp-details nlpdiv-check",
|
|
23436
|
+
children: nlpData?.path ? nlpData?.path.slice(6) : '--'
|
|
23437
|
+
})]
|
|
23438
|
+
}), jsxRuntime.jsx("div", {
|
|
23439
|
+
className: "nlp-details-header mt-4",
|
|
23440
|
+
children: "Inputs:"
|
|
23441
|
+
}), nlpData?.stepInputs?.length ? nlpData.stepInputs.map((stepInput, index) => {
|
|
23442
|
+
const stepInputType = stepInput.type ? stepInput.type.split('.').pop() : '--';
|
|
23443
|
+
return jsxRuntime.jsxs("div", {
|
|
23444
|
+
children: [jsxRuntime.jsxs("div", {
|
|
23445
|
+
className: "nlp-details-header",
|
|
23446
|
+
children: ["Input", index + 1, ":"]
|
|
23447
|
+
}), jsxRuntime.jsxs("div", {
|
|
23448
|
+
className: "nlp-details",
|
|
23449
|
+
children: ["type: ", stepInputType]
|
|
23450
|
+
}), jsxRuntime.jsxs("div", {
|
|
23451
|
+
className: "nlp-details mb-4",
|
|
23452
|
+
children: ["name: ", stepInput.name || '--']
|
|
23453
|
+
})]
|
|
23454
|
+
}, index);
|
|
23455
|
+
}) : jsxRuntime.jsx("div", {
|
|
23456
|
+
className: "nlp-details mb-4",
|
|
23457
|
+
children: "--"
|
|
23458
|
+
}), jsxRuntime.jsx("div", {
|
|
23459
|
+
className: "nlp-details-header",
|
|
23460
|
+
children: "Output:"
|
|
23461
|
+
}), jsxRuntime.jsx("div", {
|
|
23462
|
+
className: "nlp-details mb-4",
|
|
23463
|
+
children: nlpData?.returnType || '--'
|
|
23464
|
+
})]
|
|
23465
|
+
})
|
|
23466
|
+
})]
|
|
23467
|
+
})
|
|
23468
|
+
});
|
|
23469
|
+
};
|
|
23470
|
+
|
|
23471
|
+
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\", sans-serif;\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\", 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-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\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-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}";
|
|
23472
|
+
styleInject(css_248z);
|
|
23473
|
+
|
|
23474
|
+
const nlpInputReducer = (state, action) => {
|
|
23475
|
+
switch (action.type) {
|
|
23476
|
+
case 'FOCUS_INPUT':
|
|
23477
|
+
return {
|
|
23478
|
+
...state,
|
|
23479
|
+
isInputFocused: true,
|
|
23480
|
+
iconColor: 'var(--ff-nlp-input-brand-color)',
|
|
23481
|
+
isIconClick: true,
|
|
23482
|
+
showOptions: true
|
|
23483
|
+
};
|
|
23484
|
+
case 'BLUR_INPUT':
|
|
23485
|
+
return {
|
|
23486
|
+
...state,
|
|
23487
|
+
isInputFocused: false,
|
|
23488
|
+
options: action.payload.optionsList,
|
|
23489
|
+
option: action.payload.option,
|
|
23490
|
+
// todo color need to be add in style guide
|
|
23491
|
+
iconColor: 'var(--ff-nlp-input-default-color)',
|
|
23492
|
+
isIconClick: false,
|
|
23493
|
+
showOptions: false,
|
|
23494
|
+
dropdownPosition: {
|
|
23495
|
+
positionX: 0,
|
|
23496
|
+
positionY: 0,
|
|
23497
|
+
width: 0,
|
|
23498
|
+
fromBottom: 0
|
|
23499
|
+
}
|
|
23500
|
+
};
|
|
23501
|
+
case 'MOUSE_ENTER':
|
|
23502
|
+
return state.isInputFocused ? state : {
|
|
23503
|
+
...state,
|
|
23504
|
+
iconColor: 'var(--ff-nlp-input-text-hover-color)'
|
|
23505
|
+
};
|
|
23506
|
+
case 'MOUSE_LEAVE':
|
|
23507
|
+
return state.isInputFocused ? state :
|
|
23508
|
+
// todo color need to be add in style guide
|
|
23509
|
+
{
|
|
23510
|
+
...state,
|
|
23511
|
+
iconColor: 'var(--ff-nlp-input-default-color)',
|
|
23512
|
+
isIconClick: false
|
|
23513
|
+
};
|
|
23514
|
+
case 'UPDATE_DROPDOWN_POSITION':
|
|
23515
|
+
const {
|
|
23516
|
+
positionX,
|
|
23517
|
+
positionY,
|
|
23518
|
+
width,
|
|
23519
|
+
fromBottom
|
|
23520
|
+
} = action.payload || {};
|
|
23521
|
+
return {
|
|
23522
|
+
...state,
|
|
23523
|
+
dropdownPosition: {
|
|
23524
|
+
positionX,
|
|
23525
|
+
positionY,
|
|
23526
|
+
width,
|
|
23527
|
+
fromBottom
|
|
23528
|
+
}
|
|
23529
|
+
};
|
|
23530
|
+
case 'UPDATE_OPTION':
|
|
23531
|
+
return {
|
|
23532
|
+
...state,
|
|
23533
|
+
option: action.payload
|
|
23534
|
+
};
|
|
23535
|
+
case 'UPDATE_OPTION_LIST':
|
|
23536
|
+
return {
|
|
23537
|
+
...state,
|
|
23538
|
+
options: action.payload
|
|
23539
|
+
};
|
|
23540
|
+
case 'SHOW_ERROR':
|
|
23541
|
+
return {
|
|
23542
|
+
...state,
|
|
23543
|
+
isInputFocused: true,
|
|
23544
|
+
isIconClick: false,
|
|
23545
|
+
showOptions: false,
|
|
23546
|
+
options: action.payload.optionsList,
|
|
23547
|
+
option: action.payload.option,
|
|
23548
|
+
iconColor: 'var(--ff-nlp-input-default-color)',
|
|
23549
|
+
dropdownPosition: {
|
|
23550
|
+
positionX: 0,
|
|
23551
|
+
positionY: 0,
|
|
23552
|
+
width: 0,
|
|
23553
|
+
fromBottom: 0
|
|
23554
|
+
}
|
|
23068
23555
|
};
|
|
23069
|
-
|
|
23070
|
-
|
|
23071
|
-
// We can pass it along to AsyncScriptLoader as a regular prop, e.g. "forwardedRef"
|
|
23072
|
-
// And it can then be attached to the Component.
|
|
23073
|
-
|
|
23074
|
-
var ForwardedComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
23075
|
-
return /*#__PURE__*/React.createElement(AsyncScriptLoader, _extends({}, props, {
|
|
23076
|
-
forwardedRef: ref
|
|
23077
|
-
}));
|
|
23078
|
-
});
|
|
23079
|
-
ForwardedComponent.displayName = "AsyncScriptLoader(" + wrappedComponentName + ")";
|
|
23080
|
-
ForwardedComponent.propTypes = {
|
|
23081
|
-
asyncScriptOnLoad: PropTypes.func
|
|
23082
|
-
};
|
|
23083
|
-
return hoistStatics(ForwardedComponent, WrappedComponent);
|
|
23084
|
-
};
|
|
23085
|
-
}
|
|
23086
|
-
|
|
23087
|
-
var callbackName = "onloadcallback";
|
|
23088
|
-
var globalName = "grecaptcha";
|
|
23089
|
-
function getOptions() {
|
|
23090
|
-
return typeof window !== "undefined" && window.recaptchaOptions || {};
|
|
23091
|
-
}
|
|
23092
|
-
function getURL() {
|
|
23093
|
-
var dynamicOptions = getOptions();
|
|
23094
|
-
var hostname = dynamicOptions.useRecaptchaNet ? "recaptcha.net" : "www.google.com";
|
|
23095
|
-
if (dynamicOptions.enterprise) {
|
|
23096
|
-
return "https://" + hostname + "/recaptcha/enterprise.js?onload=" + callbackName + "&render=explicit";
|
|
23556
|
+
default:
|
|
23557
|
+
return state;
|
|
23097
23558
|
}
|
|
23098
|
-
|
|
23099
|
-
|
|
23100
|
-
|
|
23101
|
-
|
|
23102
|
-
|
|
23103
|
-
|
|
23104
|
-
|
|
23105
|
-
|
|
23106
|
-
|
|
23107
|
-
|
|
23108
|
-
|
|
23109
|
-
|
|
23110
|
-
|
|
23111
|
-
const Recaptcha = /*#__PURE__*/React.forwardRef(({
|
|
23112
|
-
onVerify,
|
|
23559
|
+
};
|
|
23560
|
+
const NlpInput = ({
|
|
23561
|
+
label = '',
|
|
23562
|
+
showLabel = true,
|
|
23563
|
+
optionsList = [],
|
|
23564
|
+
selectedOption = {
|
|
23565
|
+
displayName: '',
|
|
23566
|
+
projectId: '',
|
|
23567
|
+
nlpType: '',
|
|
23568
|
+
platform: ''
|
|
23569
|
+
},
|
|
23570
|
+
onChange = () => {},
|
|
23571
|
+
errorMsg = '',
|
|
23113
23572
|
className = '',
|
|
23114
|
-
|
|
23115
|
-
|
|
23116
|
-
|
|
23117
|
-
|
|
23118
|
-
|
|
23119
|
-
|
|
23120
|
-
|
|
23121
|
-
|
|
23122
|
-
|
|
23573
|
+
optionZIndex = 100,
|
|
23574
|
+
disabled = false,
|
|
23575
|
+
borderRadius = true,
|
|
23576
|
+
showBorder = true,
|
|
23577
|
+
required = false
|
|
23578
|
+
}) => {
|
|
23579
|
+
const initialState = React.useMemo(() => ({
|
|
23580
|
+
isInputFocused: false,
|
|
23581
|
+
// todo color need to be added in style guide
|
|
23582
|
+
iconColor: 'var(--ff-nlp-input-default-color)',
|
|
23583
|
+
isIconClick: false,
|
|
23584
|
+
showOptions: false,
|
|
23585
|
+
options: optionsList,
|
|
23586
|
+
option: checkEmpty(selectedOption) ? '' : selectedOption?.projectId,
|
|
23587
|
+
dropdownPosition: {
|
|
23588
|
+
positionX: 0,
|
|
23589
|
+
positionY: 0,
|
|
23590
|
+
width: 0,
|
|
23591
|
+
fromBottom: 0
|
|
23592
|
+
}
|
|
23593
|
+
}), [optionsList, selectedOption]);
|
|
23594
|
+
const [selectControlState, dispatch] = React.useReducer(nlpInputReducer, initialState);
|
|
23595
|
+
const DropDownRef = React.useRef(null);
|
|
23596
|
+
const InputRef = React.useRef(null);
|
|
23597
|
+
const {
|
|
23598
|
+
isInputFocused,
|
|
23599
|
+
iconColor,
|
|
23600
|
+
isIconClick,
|
|
23601
|
+
showOptions,
|
|
23602
|
+
dropdownPosition,
|
|
23603
|
+
options,
|
|
23604
|
+
option
|
|
23605
|
+
} = selectControlState;
|
|
23606
|
+
const calculatePosition = usePortalPosition(DropDownRef, showOptions);
|
|
23607
|
+
const handleSelectAction = actionType => {
|
|
23608
|
+
if (!disabled) {
|
|
23609
|
+
if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
|
|
23610
|
+
dispatch({
|
|
23611
|
+
type: actionType,
|
|
23612
|
+
payload: {
|
|
23613
|
+
optionsList,
|
|
23614
|
+
option: selectedOption.projectId
|
|
23615
|
+
}
|
|
23616
|
+
});
|
|
23617
|
+
} else {
|
|
23618
|
+
dispatch({
|
|
23619
|
+
type: actionType
|
|
23620
|
+
});
|
|
23621
|
+
}
|
|
23622
|
+
}
|
|
23623
|
+
};
|
|
23624
|
+
const onSelectInputChange = e => {
|
|
23625
|
+
if (disabled) return;
|
|
23626
|
+
const {
|
|
23627
|
+
value
|
|
23628
|
+
} = e.target;
|
|
23629
|
+
const filteredOptions = optionsList.filter(option => {
|
|
23630
|
+
return option.displayName.toLowerCase().includes(value.toLowerCase().trim());
|
|
23631
|
+
});
|
|
23632
|
+
dispatch({
|
|
23633
|
+
type: 'UPDATE_OPTION_LIST',
|
|
23634
|
+
payload: filteredOptions
|
|
23635
|
+
});
|
|
23636
|
+
dispatch({
|
|
23637
|
+
type: 'UPDATE_OPTION',
|
|
23638
|
+
payload: value
|
|
23639
|
+
});
|
|
23640
|
+
};
|
|
23641
|
+
const onSelectBlur = () => {
|
|
23642
|
+
if (disabled) return;
|
|
23643
|
+
if (errorMsg) {
|
|
23644
|
+
handleSelectAction('SHOW_ERROR');
|
|
23123
23645
|
} else {
|
|
23124
|
-
|
|
23646
|
+
handleSelectAction('BLUR_INPUT');
|
|
23125
23647
|
}
|
|
23126
23648
|
};
|
|
23127
|
-
const
|
|
23649
|
+
const onSelectOptionSelector = option => {
|
|
23650
|
+
if (!disabled) {
|
|
23651
|
+
onSelectBlur();
|
|
23652
|
+
dispatch({
|
|
23653
|
+
type: 'UPDATE_OPTION',
|
|
23654
|
+
payload: option.projectId
|
|
23655
|
+
});
|
|
23656
|
+
if (onChange) {
|
|
23657
|
+
onChange(option);
|
|
23658
|
+
}
|
|
23659
|
+
}
|
|
23660
|
+
};
|
|
23661
|
+
const onSelectUpdatePosition = () => {
|
|
23662
|
+
if (!showOptions || !DropDownRef?.current || disabled) return;
|
|
23663
|
+
const {
|
|
23664
|
+
positionX,
|
|
23665
|
+
positionY,
|
|
23666
|
+
width,
|
|
23667
|
+
fromBottom
|
|
23668
|
+
} = calculatePosition(DropDownRef);
|
|
23669
|
+
dispatch({
|
|
23670
|
+
type: 'UPDATE_DROPDOWN_POSITION',
|
|
23671
|
+
payload: {
|
|
23672
|
+
positionX,
|
|
23673
|
+
positionY,
|
|
23674
|
+
width,
|
|
23675
|
+
fromBottom
|
|
23676
|
+
}
|
|
23677
|
+
});
|
|
23678
|
+
};
|
|
23679
|
+
const onSelectToggleScroll = isEnabled => {
|
|
23680
|
+
const bodyScrollWidth = window.innerWidth - document.body.clientWidth;
|
|
23681
|
+
document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
|
|
23682
|
+
document.body.style.overflow = isEnabled ? '' : 'hidden';
|
|
23683
|
+
};
|
|
23684
|
+
React.useEffect(() => {
|
|
23685
|
+
if (disabled) return;
|
|
23686
|
+
if (showOptions) {
|
|
23687
|
+
onSelectToggleScroll(!showOptions);
|
|
23688
|
+
}
|
|
23689
|
+
onSelectUpdatePosition();
|
|
23690
|
+
const handleResizeOrScroll = () => onSelectUpdatePosition();
|
|
23691
|
+
window.addEventListener('resize', handleResizeOrScroll);
|
|
23692
|
+
window.addEventListener('scroll', handleResizeOrScroll);
|
|
23693
|
+
return () => {
|
|
23694
|
+
onSelectToggleScroll(true);
|
|
23695
|
+
window.removeEventListener('resize', handleResizeOrScroll);
|
|
23696
|
+
window.removeEventListener('scroll', handleResizeOrScroll);
|
|
23697
|
+
};
|
|
23698
|
+
}, [showOptions]);
|
|
23699
|
+
React.useEffect(() => {
|
|
23700
|
+
if (errorMsg) {
|
|
23701
|
+
handleSelectAction('SHOW_ERROR');
|
|
23702
|
+
}
|
|
23703
|
+
}, []);
|
|
23704
|
+
const applyActiveOptionClasses = !isInputFocused && Boolean(option);
|
|
23128
23705
|
return jsxRuntime.jsxs("div", {
|
|
23129
|
-
className: classNames(
|
|
23130
|
-
children: [jsxRuntime.
|
|
23131
|
-
|
|
23132
|
-
|
|
23133
|
-
|
|
23134
|
-
|
|
23135
|
-
|
|
23136
|
-
|
|
23137
|
-
|
|
23138
|
-
|
|
23139
|
-
|
|
23140
|
-
|
|
23706
|
+
className: classNames(`ff-nlp-input-wrapper ${className}`),
|
|
23707
|
+
children: [jsxRuntime.jsxs("div", {
|
|
23708
|
+
className: "ff-nlp-input",
|
|
23709
|
+
children: [jsxRuntime.jsx("input", {
|
|
23710
|
+
type: "text",
|
|
23711
|
+
className: classNames('ff-nlp-input-input', {
|
|
23712
|
+
'ff-nlp-input-input--default': !isInputFocused,
|
|
23713
|
+
'ff-nlp-input-input--active': applyActiveOptionClasses,
|
|
23714
|
+
'ff-nlp-input-input--no-label': !showLabel,
|
|
23715
|
+
'ff-nlp-input-input--error': errorMsg && !isInputFocused && !Boolean(option),
|
|
23716
|
+
'ff-nlp-input-input--border-radius': !borderRadius,
|
|
23717
|
+
'ff-nlp-input-input--disable': disabled,
|
|
23718
|
+
'ff-nlp-input-input--no-border': !showBorder
|
|
23719
|
+
}),
|
|
23720
|
+
// inline css required due to multiple overlay scenarios are present
|
|
23721
|
+
style: {
|
|
23722
|
+
zIndex: optionZIndex
|
|
23723
|
+
},
|
|
23724
|
+
onFocus: () => handleSelectAction('FOCUS_INPUT'),
|
|
23725
|
+
onMouseEnter: () => handleSelectAction('MOUSE_ENTER'),
|
|
23726
|
+
onMouseLeave: () => handleSelectAction('MOUSE_LEAVE'),
|
|
23727
|
+
onChange: onSelectInputChange,
|
|
23728
|
+
value: option,
|
|
23729
|
+
disabled: disabled,
|
|
23730
|
+
autoComplete: "off",
|
|
23731
|
+
spellCheck: "false",
|
|
23732
|
+
ref: InputRef
|
|
23733
|
+
}), showLabel && jsxRuntime.jsxs("div", {
|
|
23734
|
+
className: classNames('ff-nlp-input-label', {
|
|
23735
|
+
'ff-nlp-input-label--default': !isInputFocused,
|
|
23736
|
+
'ff-nlp-input-label--active': isInputFocused || Boolean(option),
|
|
23737
|
+
'ff-nlp-input-label--error': errorMsg
|
|
23738
|
+
}),
|
|
23739
|
+
children: [required && jsxRuntime.jsx(Typography, {
|
|
23740
|
+
color: "var(--$error-light)",
|
|
23741
|
+
className: "ff-nlp-input-label--required",
|
|
23742
|
+
children: "*"
|
|
23743
|
+
}), label]
|
|
23744
|
+
}), jsxRuntime.jsx(Icon, {
|
|
23745
|
+
name: "arrow_up",
|
|
23746
|
+
height: 7,
|
|
23747
|
+
width: 12,
|
|
23748
|
+
className: classNames('ff-nlp-input-arrow', {
|
|
23749
|
+
'ff-nlp-input-arrow--down': isIconClick,
|
|
23750
|
+
'ff-nlp-input-arrow--no-label': !showLabel
|
|
23751
|
+
}),
|
|
23752
|
+
color: iconColor
|
|
23753
|
+
}), jsxRuntime.jsx("fieldset", {
|
|
23754
|
+
className: classNames('ff-nlp-input-fieldset', {
|
|
23755
|
+
'ff-nlp-input-fieldset--no-label': !showLabel,
|
|
23756
|
+
'ff-nlp-input-fieldset--default': !isInputFocused,
|
|
23757
|
+
'ff-nlp-input-fieldset--active': isInputFocused,
|
|
23758
|
+
'ff-nlp-input-fieldset--option': applyActiveOptionClasses,
|
|
23759
|
+
'ff-nlp-input-fieldset--error': errorMsg,
|
|
23760
|
+
'ff-nlp-input-fieldset--border-radius': !borderRadius,
|
|
23761
|
+
'ff-nlp-input-fieldset--no-border': !showBorder
|
|
23762
|
+
})
|
|
23763
|
+
})]
|
|
23764
|
+
}), errorMsg && jsxRuntime.jsx(Typography, {
|
|
23765
|
+
className: "ff-nlp-input-wrapper-error-text",
|
|
23766
|
+
fontSize: 8,
|
|
23767
|
+
color: 'var(--error-light)',
|
|
23768
|
+
children: errorMsg
|
|
23769
|
+
}), jsxRuntime.jsx("div", {
|
|
23770
|
+
ref: DropDownRef,
|
|
23771
|
+
children: showOptions && /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx(NlpDropdown, {
|
|
23772
|
+
onSelectBlur: onSelectBlur,
|
|
23773
|
+
onSelectOptionSelector: onSelectOptionSelector,
|
|
23774
|
+
dropdownPosition: dropdownPosition,
|
|
23775
|
+
options: options,
|
|
23776
|
+
optionZIndex: optionZIndex,
|
|
23777
|
+
inputRef: InputRef
|
|
23778
|
+
}), document.body)
|
|
23141
23779
|
})]
|
|
23142
23780
|
});
|
|
23143
|
-
}
|
|
23781
|
+
};
|
|
23144
23782
|
|
|
23145
23783
|
exports.Accordion = Accordion;
|
|
23146
23784
|
exports.AddResourceButton = AddButton;
|
|
@@ -23151,6 +23789,7 @@ exports.Checkbox = Checkbox;
|
|
|
23151
23789
|
exports.Chip = Chip;
|
|
23152
23790
|
exports.Col = Col;
|
|
23153
23791
|
exports.Container = Container;
|
|
23792
|
+
exports.DashboardDonutChart = DashboardDonutChart;
|
|
23154
23793
|
exports.DatePicker = CustomDatePicker;
|
|
23155
23794
|
exports.DonutChart = DonutChart;
|
|
23156
23795
|
exports.DragAndDrop = DragAndDrop;
|
|
@@ -23168,6 +23807,8 @@ exports.MenuOption = MenuOption;
|
|
|
23168
23807
|
exports.MiniModal = MiniModal;
|
|
23169
23808
|
exports.Modal = Modal;
|
|
23170
23809
|
exports.MultiSelect = MultiSelect;
|
|
23810
|
+
exports.NLPInput = NlpInput;
|
|
23811
|
+
exports.PieChart = PieChart;
|
|
23171
23812
|
exports.RadialChart = RadialChart;
|
|
23172
23813
|
exports.RadioButton = RadioButton;
|
|
23173
23814
|
exports.RadioGroup = RadioGroup;
|