pixel-react 1.9.4 → 1.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.yarn/install-state.gz +0 -0
- package/lib/ComponentProps/TreeNodeProps.d.ts +31 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -2
- package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
- package/lib/components/TableTree/types.d.ts +3 -7
- package/lib/components/Tabs/Tabs.d.ts +1 -1
- package/lib/components/Tabs/types.d.ts +1 -0
- package/lib/index.d.ts +51 -11
- package/lib/index.esm.js +125 -34
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +126 -33
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getTreeDetails/getTreeDetails.d.ts +10 -0
- package/lib/utils/handleTreeNodeSelect/handleTreeNodeSelect.d.ts +2 -0
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +31 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +6 -3
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +10 -4
- package/src/components/Charts/MultiRadialChart/types.ts +16 -17
- package/src/components/TableTree/Components/TableBody.tsx +22 -23
- package/src/components/TableTree/Components/TableCell.tsx +3 -3
- package/src/components/TableTree/Components/TableRow.tsx +0 -3
- package/src/components/TableTree/TableTree.scss +11 -1
- package/src/components/TableTree/TableTree.tsx +28 -15
- package/src/components/TableTree/data.ts +86 -1
- package/src/components/TableTree/types.ts +3 -8
- package/src/components/Tabs/Tabs.scss +44 -1
- package/src/components/Tabs/Tabs.stories.tsx +26 -0
- package/src/components/Tabs/Tabs.tsx +2 -0
- package/src/components/Tabs/types.ts +1 -0
- package/src/index.ts +17 -2
- package/src/utils/findAndInsert/findAndInsert.stories.tsx +1 -0
- package/src/utils/getTreeDetails/getTreeDetails.stories.tsx +167 -0
- package/src/utils/getTreeDetails/getTreeDetails.ts +65 -0
- package/src/utils/handleTreeNodeSelect/HandleTreeNodeSelect.stories.tsx +195 -0
- package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts +61 -0
package/lib/index.js
CHANGED
@@ -14387,7 +14387,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
|
|
14387
14387
|
}), document.body);
|
14388
14388
|
});
|
14389
14389
|
|
14390
|
-
var css_248z$P = ".tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 18px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n border: 1px solid #f1f1f1;\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n display: none;\n}\n.tree-table tr:hover {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table tr::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table th,\n.tree-table td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table th {\n color: var(--brand-color);\n background: var(--slider-table-color);\n font-size: 13px;\n width: 400px;\n}\n.tree-table th:first-child {\n position: sticky;\n left: 0;\n}\n.tree-table td {\n font-size: 14px;\n color: var(--brand-color);\n height: 18px;\n}\n.tree-table td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table td:first-child:hover {\n background-color: var(--hover-color);\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n padding-left: 8px;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
|
14390
|
+
var css_248z$P = ":root {\n --table-height: auto;\n}\n\n.tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 18px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n max-height: var(--table-height); /* Adjust height as needed */\n overflow-y: auto;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n border: 1px solid #f1f1f1;\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n display: none;\n}\n.tree-table tr:hover {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table tr::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table th,\n.tree-table td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table th {\n color: var(--brand-color);\n background: var(--slider-table-color);\n font-size: 13px;\n width: 400px;\n}\n.tree-table th:first-child {\n position: sticky;\n left: 0;\n}\n.tree-table td {\n font-size: 14px;\n color: var(--brand-color);\n height: 18px;\n}\n.tree-table td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table td:first-child:hover {\n background-color: var(--hover-color);\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n padding-left: 8px;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
|
14391
14391
|
styleInject(css_248z$P);
|
14392
14392
|
|
14393
14393
|
const TableHead = /*#__PURE__*/React.memo(({
|
@@ -14447,9 +14447,9 @@ const TableCell = /*#__PURE__*/React.memo(({
|
|
14447
14447
|
children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last), jsxRuntime.jsxs("div", {
|
14448
14448
|
className: "tree-title-container",
|
14449
14449
|
children: [col.isTree && jsxRuntime.jsx("span", {
|
14450
|
-
className: `tree-table-space-block last-block ${node.
|
14450
|
+
className: `tree-table-space-block last-block ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
|
14451
14451
|
onClick: () => onToggleExpand(node),
|
14452
|
-
children: node.
|
14452
|
+
children: node.container && node?.totalResourceCount > 0 && jsxRuntime.jsx(SvgArrowsDownIcon, {})
|
14453
14453
|
}), jsxRuntime.jsxs("span", {
|
14454
14454
|
className: "tree-table-td-content",
|
14455
14455
|
children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
|
@@ -14470,15 +14470,12 @@ const TableCell = /*#__PURE__*/React.memo(({
|
|
14470
14470
|
|
14471
14471
|
const TableRow = /*#__PURE__*/React.memo(({
|
14472
14472
|
node,
|
14473
|
-
// level,
|
14474
14473
|
columnsData,
|
14475
14474
|
selected,
|
14476
14475
|
select,
|
14477
14476
|
onRowClick,
|
14478
14477
|
onToggleExpand,
|
14479
14478
|
onCheckBoxChange
|
14480
|
-
// parentSiblings,
|
14481
|
-
// isLast,
|
14482
14479
|
}) => jsxRuntime.jsx("tr", {
|
14483
14480
|
"data-level": node.hierarchy,
|
14484
14481
|
className: "show",
|
@@ -14501,14 +14498,13 @@ const TableBody = /*#__PURE__*/React.memo(({
|
|
14501
14498
|
onRowClick,
|
14502
14499
|
onToggleExpand,
|
14503
14500
|
onCheckBoxChange
|
14504
|
-
}) => jsxRuntime.jsxs("tbody", {
|
14501
|
+
}) => checkEmpty(flattenedTreeData) ? null : jsxRuntime.jsxs("tbody", {
|
14505
14502
|
className: "ff-table-tree-body",
|
14506
14503
|
children: [jsxRuntime.jsx("tr", {
|
14507
14504
|
id: "ff-table-tree-first-node"
|
14508
14505
|
}), flattenedTreeData?.map(node => {
|
14509
14506
|
return jsxRuntime.jsx(TableRow, {
|
14510
14507
|
node: node,
|
14511
|
-
// level={level}
|
14512
14508
|
columnsData: columnsData,
|
14513
14509
|
selected: selected,
|
14514
14510
|
select: select,
|
@@ -14531,10 +14527,12 @@ const TreeTable = ({
|
|
14531
14527
|
onChange,
|
14532
14528
|
onClick,
|
14533
14529
|
onExpand,
|
14534
|
-
loadMore = () => {}
|
14530
|
+
loadMore = () => {},
|
14531
|
+
height = 'auto'
|
14535
14532
|
}) => {
|
14533
|
+
const treeRef = React.useRef(null);
|
14536
14534
|
useIntersectionObserver(['ff-table-tree-last-node', 'ff-table-tree-first-node'], {
|
14537
|
-
root: null,
|
14535
|
+
root: treeRef?.current || null,
|
14538
14536
|
rootMargin: '0px',
|
14539
14537
|
threshold: 0.1,
|
14540
14538
|
onIntersect: entry => {
|
@@ -14550,32 +14548,40 @@ const TreeTable = ({
|
|
14550
14548
|
}
|
14551
14549
|
}
|
14552
14550
|
});
|
14553
|
-
const handleToggleExpand = React.useCallback(node => onExpand?.(
|
14551
|
+
const handleToggleExpand = React.useCallback(node => onExpand?.(node), [onExpand]);
|
14554
14552
|
const handleCheckBoxChange = React.useCallback((e, node) => {
|
14555
14553
|
onChange?.(e, node);
|
14556
14554
|
}, [onChange]);
|
14557
14555
|
const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
|
14558
14556
|
return jsxRuntime.jsx("div", {
|
14559
14557
|
className: "tree-table-wrap",
|
14560
|
-
children: jsxRuntime.
|
14561
|
-
className: "
|
14562
|
-
|
14563
|
-
|
14564
|
-
|
14565
|
-
|
14566
|
-
|
14567
|
-
|
14568
|
-
|
14569
|
-
|
14570
|
-
|
14571
|
-
|
14572
|
-
|
14558
|
+
children: jsxRuntime.jsx("div", {
|
14559
|
+
className: "table-scrollable",
|
14560
|
+
id: "ff-table-tree-scroll-container",
|
14561
|
+
ref: treeRef,
|
14562
|
+
style: {
|
14563
|
+
'--table-height': `${height !== 'auto' ? height + 'px' : height}`
|
14564
|
+
},
|
14565
|
+
children: jsxRuntime.jsxs("table", {
|
14566
|
+
className: "tree-table",
|
14567
|
+
children: [jsxRuntime.jsx(TableHead, {
|
14568
|
+
columnsData: columnsData
|
14569
|
+
}), jsxRuntime.jsx(TableBody, {
|
14570
|
+
flattenedTreeData: treeData,
|
14571
|
+
columnsData: columnsData,
|
14572
|
+
selected: selected,
|
14573
|
+
select: select,
|
14574
|
+
onRowClick: handleRowClick,
|
14575
|
+
onToggleExpand: handleToggleExpand,
|
14576
|
+
onCheckBoxChange: handleCheckBoxChange
|
14577
|
+
})]
|
14578
|
+
})
|
14573
14579
|
})
|
14574
14580
|
});
|
14575
14581
|
};
|
14576
14582
|
var TableTree = /*#__PURE__*/React.memo(TreeTable);
|
14577
14583
|
|
14578
|
-
var css_248z$O = ":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 --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n position: relative;\n border: none;\n background: none;\n padding: 0 4px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\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 border-color: var(--input-default-label-color);\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:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .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:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: 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:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\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}\n.ff-tabs-container .ff-defaultStatus {\n position: absolute;\n top: 2px;\n right: 0px;\n width: 6px;\n height: 6px;\n background-color: transparent;\n border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n background-color: var(--confirm-tick-icon-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n background-color: var(--delete-text-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
|
14584
|
+
var css_248z$O = ":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 --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row {\n flex: 0 1 auto;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n position: relative;\n border: none;\n background: none;\n padding: 0 4px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\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 border-color: var(--input-default-label-color);\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:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .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:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: 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:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\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-row--no-padding {\n border-radius: 8px;\n background: white;\n padding: 0px;\n justify-content: flex-start;\n margin-right: 8px;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 7px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule.active {\n background-color: var(--slider-table-color);\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}\n.ff-tabs-container .ff-defaultStatus {\n position: absolute;\n top: 2px;\n right: 0px;\n width: 6px;\n height: 6px;\n background-color: transparent;\n border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n background-color: var(--confirm-tick-icon-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n background-color: var(--delete-text-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
|
14579
14585
|
styleInject(css_248z$O);
|
14580
14586
|
|
14581
14587
|
const Tabs = ({
|
@@ -14583,13 +14589,15 @@ const Tabs = ({
|
|
14583
14589
|
tabsData,
|
14584
14590
|
activeTabId,
|
14585
14591
|
onTabClick,
|
14586
|
-
noBorder = false
|
14592
|
+
noBorder = false,
|
14593
|
+
noPadding = false
|
14587
14594
|
}) => {
|
14588
14595
|
return jsxRuntime.jsxs("div", {
|
14589
14596
|
className: `ff-tabs-container`,
|
14590
14597
|
children: [jsxRuntime.jsx("div", {
|
14591
14598
|
className: classNames(`ff-tab-row--${variant}`, {
|
14592
|
-
'ff-tab-row--no-border': noBorder
|
14599
|
+
'ff-tab-row--no-border': noBorder,
|
14600
|
+
'ff-tab-row--no-padding': noPadding
|
14593
14601
|
}),
|
14594
14602
|
children: tabsData.map(tab => jsxRuntime.jsxs("button", {
|
14595
14603
|
onClick: () => !tab.disabled && onTabClick(tab.id),
|
@@ -26948,7 +26956,7 @@ const Paper = ({
|
|
26948
26956
|
});
|
26949
26957
|
};
|
26950
26958
|
|
26951
|
-
var css_248z$D = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n flex-direction: row-reverse;\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 {\n display: block;\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: absolute;\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: flex;\n flex-wrap: wrap;\n width: 100%;\n gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item .ff-legend-value {\n white-space: nowrap;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-4 .ff-legend-item {\n flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(-n+3) {\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(n+4) {\n flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-more .ff-legend-item {\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend {\n flex-direction: column;\n flex-wrap: wrap;\n height: 200px;\n width: auto;\n justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend .ff-legend-item {\n flex: 0 0 auto !important;\n width: 100%;\n justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-4 .ff-legend-item {\n height: calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-5 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-more .ff-legend-item {\n height: calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .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.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n
|
26959
|
+
var css_248z$D = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n flex-direction: row-reverse;\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 {\n display: block;\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: absolute;\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: flex;\n flex-wrap: wrap;\n width: 100%;\n gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item .ff-legend-value {\n white-space: nowrap;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-4 .ff-legend-item {\n flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(-n+3) {\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(n+4) {\n flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-more .ff-legend-item {\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend {\n flex-direction: column;\n flex-wrap: wrap;\n height: 200px;\n width: auto;\n justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend .ff-legend-item {\n flex: 0 0 auto !important;\n width: 100%;\n justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-4 .ff-legend-item {\n height: calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-5 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-more .ff-legend-item {\n height: calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .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.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n margin-left: 1rem;\n overflow-y: auto;\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-legend-table-thead {\n position: static;\n top: auto;\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: 7px 5px 9px 20px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n text-align: right;\n padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n width: 58px;\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 margin-left: 10px;\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: 4px 8px 4px 8px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n padding-right: 22px;\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}";
|
26952
26960
|
styleInject(css_248z$D);
|
26953
26961
|
|
26954
26962
|
const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
|
@@ -26963,7 +26971,7 @@ const colorMapping = ['var(--status-success-text-color)', 'var(--status-rejected
|
|
26963
26971
|
const DashboardDonutChart = ({
|
26964
26972
|
radius = 60,
|
26965
26973
|
tableWidth,
|
26966
|
-
tableHeight =
|
26974
|
+
tableHeight = 120,
|
26967
26975
|
lineWidth = 15,
|
26968
26976
|
statusValues = [],
|
26969
26977
|
gapAngle = 0,
|
@@ -27202,16 +27210,16 @@ const DashboardDonutChart = ({
|
|
27202
27210
|
case 'tableLegend':
|
27203
27211
|
return jsxRuntime.jsx("div", {
|
27204
27212
|
className: "ff-legend-table-wrapper",
|
27213
|
+
style: {
|
27214
|
+
height: tableHeight
|
27215
|
+
},
|
27205
27216
|
children: jsxRuntime.jsxs("table", {
|
27206
27217
|
className: "ff-legend-table",
|
27207
|
-
style: {
|
27208
|
-
height: tableHeight
|
27209
|
-
},
|
27210
27218
|
children: [jsxRuntime.jsx("thead", {
|
27211
27219
|
className: "ff-legend-table-thead",
|
27212
27220
|
children: jsxRuntime.jsxs("tr", {
|
27213
27221
|
children: [jsxRuntime.jsx("th", {
|
27214
|
-
className: "ff-table-header",
|
27222
|
+
className: "ff-table-header ",
|
27215
27223
|
style: {
|
27216
27224
|
width: tableWidth
|
27217
27225
|
},
|
@@ -53670,6 +53678,89 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
|
|
53670
53678
|
return updatedData;
|
53671
53679
|
};
|
53672
53680
|
|
53681
|
+
const getTreeDetails = (action, oldData, newData, index) => {
|
53682
|
+
let treeDataList;
|
53683
|
+
let root = undefined;
|
53684
|
+
switch (action) {
|
53685
|
+
case 'above':
|
53686
|
+
treeDataList = [...newData, ...oldData].slice(0, 40);
|
53687
|
+
break;
|
53688
|
+
case 'below':
|
53689
|
+
treeDataList = [...oldData, ...newData].slice(0, 40);
|
53690
|
+
break;
|
53691
|
+
case 'expand':
|
53692
|
+
case 'collapse':
|
53693
|
+
if (typeof index === 'number') {
|
53694
|
+
treeDataList = [...oldData.slice(0, index + 1), ...newData];
|
53695
|
+
} else {
|
53696
|
+
throw new Error("Index is required for 'expand' or 'collapse' actions.");
|
53697
|
+
}
|
53698
|
+
break;
|
53699
|
+
case 'start':
|
53700
|
+
if (oldData.length > 0) {
|
53701
|
+
root = oldData[0];
|
53702
|
+
treeDataList = oldData.slice(1);
|
53703
|
+
} else {
|
53704
|
+
throw new Error('Tree data list is empty, cannot determine root.');
|
53705
|
+
}
|
53706
|
+
break;
|
53707
|
+
default:
|
53708
|
+
throw new Error(`Invalid action: ${action}`);
|
53709
|
+
}
|
53710
|
+
if (treeDataList.length === 0 && action !== 'start') {
|
53711
|
+
throw new Error('Tree data list is empty.');
|
53712
|
+
}
|
53713
|
+
const firstNode = treeDataList[0] || root;
|
53714
|
+
const lastNode = treeDataList[treeDataList.length - 1];
|
53715
|
+
return {
|
53716
|
+
treeDataList,
|
53717
|
+
next: !lastNode.lastResource,
|
53718
|
+
previous: !firstNode.lastResource,
|
53719
|
+
startId: firstNode.key,
|
53720
|
+
endId: lastNode.key,
|
53721
|
+
root
|
53722
|
+
};
|
53723
|
+
};
|
53724
|
+
|
53725
|
+
const handleTreeNodeSect = (data, key, isChecked) => {
|
53726
|
+
const nodesMap = new Map();
|
53727
|
+
// Build a map for quick access to nodes by key
|
53728
|
+
data.forEach(node => nodesMap.set(node.key, node));
|
53729
|
+
// Helper to update child nodes
|
53730
|
+
function updateChildren(nodeKey, checkedStatus) {
|
53731
|
+
for (const node of data) {
|
53732
|
+
if (node.parentId === nodeKey) {
|
53733
|
+
node.checked = checkedStatus;
|
53734
|
+
updateChildren(node.key, checkedStatus);
|
53735
|
+
}
|
53736
|
+
}
|
53737
|
+
}
|
53738
|
+
// Helper to update parent nodes
|
53739
|
+
function updateParents(nodeKey) {
|
53740
|
+
const node = nodesMap.get(nodeKey);
|
53741
|
+
if (node && node.parentId) {
|
53742
|
+
const parentNode = nodesMap.get(node.parentId);
|
53743
|
+
if (parentNode) {
|
53744
|
+
const siblings = data.filter(sibling => sibling.parentId === parentNode.key);
|
53745
|
+
const allChecked = siblings.every(sibling => sibling.checked === true);
|
53746
|
+
const someChecked = siblings.some(sibling => sibling.checked === true || sibling.checked === 'partial');
|
53747
|
+
parentNode.checked = allChecked ? true : someChecked ? 'partial' : false;
|
53748
|
+
updateParents(parentNode.key);
|
53749
|
+
}
|
53750
|
+
}
|
53751
|
+
}
|
53752
|
+
// Find the target node and update its state
|
53753
|
+
const targetNode = nodesMap.get(key);
|
53754
|
+
if (targetNode) {
|
53755
|
+
targetNode.checked = isChecked;
|
53756
|
+
// Update children recursively
|
53757
|
+
updateChildren(key, isChecked);
|
53758
|
+
// Update parents recursively
|
53759
|
+
updateParents(key);
|
53760
|
+
}
|
53761
|
+
return data;
|
53762
|
+
};
|
53763
|
+
|
53673
53764
|
//Encoding utility
|
53674
53765
|
const encode = data => btoa(unescape(encodeURIComponent(data))); // Example: Base64 encoding
|
53675
53766
|
//Decoding utility
|
@@ -53878,6 +53969,8 @@ exports.getExtension = getExtension;
|
|
53878
53969
|
exports.getExtensionWithPeriod = getExtensionWithPeriod;
|
53879
53970
|
exports.getFromIndexedDB = getFromIndexedDB;
|
53880
53971
|
exports.getSequentialPayload = getSequentialPayload;
|
53972
|
+
exports.getTreeDetails = getTreeDetails;
|
53973
|
+
exports.handleTreeNodeSect = handleTreeNodeSect;
|
53881
53974
|
exports.hasDuplicateFile = hasDuplicateFile;
|
53882
53975
|
exports.rearrangeDragItem = rearrangeDragItem;
|
53883
53976
|
exports.saveFileFromBlob = saveFileFromBlob;
|