pixel-react 1.10.10-2 → 1.10.10-4

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.
Files changed (42) hide show
  1. package/lib/ComponentProps/TreeNodeProps.d.ts +3 -0
  2. package/lib/components/AppHeader/types.d.ts +1 -0
  3. package/lib/components/ConnectingBranch/types.d.ts +2 -0
  4. package/lib/components/TableTree/Components/AddModule/AddModule.d.ts +2 -1
  5. package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
  6. package/lib/components/TableTree/Components/TableCell.d.ts +2 -2
  7. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  8. package/lib/components/TableTree/TableTree.d.ts +2 -2
  9. package/lib/components/TableTree/Utils/addNewRow.d.ts +1 -0
  10. package/lib/components/TableTree/data.d.ts +34 -0
  11. package/lib/components/TableTree/types.d.ts +12 -12
  12. package/lib/index.d.ts +15 -8
  13. package/lib/index.esm.js +237 -134
  14. package/lib/index.esm.js.map +1 -1
  15. package/lib/index.js +237 -134
  16. package/lib/index.js.map +1 -1
  17. package/package.json +1 -1
  18. package/src/ComponentProps/TreeNodeProps.ts +3 -0
  19. package/src/assets/icons/spinner.svg +42 -0
  20. package/src/components/AppHeader/AppHeader.scss +7 -1
  21. package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
  22. package/src/components/AppHeader/AppHeader.tsx +8 -1
  23. package/src/components/AppHeader/types.ts +1 -0
  24. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
  25. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
  26. package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
  27. package/src/components/ConnectingBranch/types.ts +2 -0
  28. package/src/components/Select/Select.stories.tsx +34 -10
  29. package/src/components/Select/Select.tsx +1 -0
  30. package/src/components/Select/components/Dropdown.tsx +24 -21
  31. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
  32. package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
  33. package/src/components/TableTree/Components/AddModule/AddModule.tsx +50 -14
  34. package/src/components/TableTree/Components/TableBody.tsx +2 -0
  35. package/src/components/TableTree/Components/TableCell.tsx +125 -75
  36. package/src/components/TableTree/Components/TableRow.tsx +2 -0
  37. package/src/components/TableTree/TableTree.scss +14 -2
  38. package/src/components/TableTree/TableTree.stories.tsx +26 -7
  39. package/src/components/TableTree/TableTree.tsx +31 -5
  40. package/src/components/TableTree/Utils/addNewRow.ts +3 -1
  41. package/src/components/TableTree/data.ts +5 -1
  42. package/src/components/TableTree/types.ts +13 -12
package/lib/index.esm.js CHANGED
@@ -2937,7 +2937,7 @@ const Dropdown$1 = ({
2937
2937
  }),
2938
2938
  children: !checkEmpty(options) ? options.map(option => jsx("div", {
2939
2939
  className: classNames('ff-select-dropdown-option', {
2940
- 'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
2940
+ 'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
2941
2941
  }, currentTheme),
2942
2942
  onClick: () => {
2943
2943
  if ('disable' in option && option['disable']) return;
@@ -3265,7 +3265,8 @@ const Select$1 = ({
3265
3265
  onSaveModal: onSaveModal,
3266
3266
  onCancelModal: onCancelModal,
3267
3267
  modalJSXProps: modalJSXProps,
3268
- recurrence: recurrence
3268
+ recurrence: recurrence,
3269
+ valueAccessor: valueAccessor
3269
3270
  }), document.body)
3270
3271
  })]
3271
3272
  });
@@ -14566,7 +14567,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
14566
14567
  }), document.body);
14567
14568
  });
14568
14569
 
14569
- var css_248z$R = ":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: 22px;\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.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\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 padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 400px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span 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}";
14570
+ var css_248z$R = ":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 /* Hover background for all elements of the same level */\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: 22px;\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.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\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 padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n height: 14px;\n width: 14px;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 600px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n transition: transform 0.3s ease;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span 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}";
14570
14571
  styleInject(css_248z$R);
14571
14572
 
14572
14573
  const TableHead = /*#__PURE__*/React__default.memo(({
@@ -14608,33 +14609,58 @@ const TableHead = /*#__PURE__*/React__default.memo(({
14608
14609
  });
14609
14610
  });
14610
14611
 
14611
- var css_248z$Q = ".add-module-container {\n display: flex;\n}\n.add-module-container .icons {\n cursor: pointer;\n}";
14612
+ var css_248z$Q = ".fontXs, .add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container, .add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\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.add-module-container {\n display: flex;\n}\n.add-module-container .icons {\n cursor: pointer;\n}\n.add-module-container .ff-add-module-input-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-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 padding: 4px 6px;\n transition: all 0.3s ease-in-out;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container .ff-add-module-label {\n color: var(--input-default-label-color);\n}\n.add-module-container .ff-add-module-input-container .add-module-input {\n height: 24px;\n padding: 0px 6px;\n width: 430px;\n border: 0.5px solid var(--nlp-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container .ff-add-module-label {\n color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container .ff-add-module-label {\n color: var(--nlp-color);\n}\n.add-module-container .ff-module-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}";
14612
14613
  styleInject(css_248z$Q);
14613
14614
 
14614
14615
  const AddModule = ({
14615
14616
  onConfirm,
14616
14617
  onCancel,
14617
14618
  error,
14618
- value = ''
14619
+ value = '',
14620
+ label = 'Add Script'
14619
14621
  }) => {
14620
- console.log('🚀 ~ value:', value);
14621
14622
  const [text, setText] = useState(value);
14623
+ const isValueFilled = !checkEmpty(text);
14622
14624
  return jsxs(Fragment, {
14623
14625
  children: [jsxs("div", {
14624
- className: "add-module-container",
14625
- children: [jsx("input", {
14626
- type: "text",
14627
- className: "add-module-input",
14628
- onChange: e => setText(e.target.value),
14629
- value: text
14630
- }), jsx(Icon, {
14631
- className: "icons",
14632
- name: "update_icon",
14633
- onClick: () => onConfirm && onConfirm(text)
14634
- }), jsx(Icon, {
14635
- className: "icons",
14636
- name: "close",
14637
- onClick: onCancel
14626
+ className: classNames('add-module-container'),
14627
+ children: [jsxs("div", {
14628
+ className: classNames('ff-add-module-input-container', {
14629
+ 'ff-add-module-input-container--float': isValueFilled
14630
+ }),
14631
+ children: [jsx("label", {
14632
+ className: "ff-add-module-label-container",
14633
+ htmlFor: "add-module-input",
14634
+ children: jsx("span", {
14635
+ className: classNames('ff-add-module-label', {
14636
+ 'ff-input-label--no-hover': !!text
14637
+ }),
14638
+ children: label
14639
+ })
14640
+ }), jsx("input", {
14641
+ name: "add-module-input",
14642
+ type: "text",
14643
+ className: "add-module-input",
14644
+ onChange: e => setText(e.target.value),
14645
+ value: text
14646
+ })]
14647
+ }), jsxs("div", {
14648
+ className: "ff-module-icon-container",
14649
+ children: [jsx(Icon, {
14650
+ className: "icons",
14651
+ name: "update_icon",
14652
+ onClick: () => onConfirm && onConfirm(text),
14653
+ color: "var(--label-edit-confirm-icon)",
14654
+ height: 18,
14655
+ width: 18
14656
+ }), jsx(Icon, {
14657
+ className: "icons",
14658
+ name: "close",
14659
+ onClick: onCancel,
14660
+ color: "var(--label-edit-cancel-icon)",
14661
+ height: 14,
14662
+ width: 14
14663
+ })]
14638
14664
  })]
14639
14665
  }), jsx("small", {
14640
14666
  children: error
@@ -14642,6 +14668,8 @@ const AddModule = ({
14642
14668
  });
14643
14669
  };
14644
14670
 
14671
+ const SvgSpinner = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("style", null, "\r\n .spinner_DupU {\r\n animation: spinner_sM3D 1.2s infinite;\r\n fill: #71347b;\r\n }\r\n .spinner_GWtZ { animation-delay: .1s; }\r\n .spinner_dwN6 { animation-delay: .2s; }\r\n .spinner_46QP { animation-delay: .3s; }\r\n .spinner_PD82 { animation-delay: .4s; }\r\n .spinner_eUgh { animation-delay: .5s; }\r\n .spinner_eUaP { animation-delay: .6s; }\r\n .spinner_j38H { animation-delay: .7s; }\r\n .spinner_tVmX { animation-delay: .8s; }\r\n .spinner_DQhX { animation-delay: .9s; }\r\n .spinner_GIL4 { animation-delay: 1s; }\r\n .spinner_n0Yb { animation-delay: 1.1s; }\r\n\r\n @keyframes spinner_sM3D {\r\n 0%, 50% {\r\n animation-timing-function: cubic-bezier(0, 1, 0, 1);\r\n r: 0;\r\n }\r\n 10% {\r\n animation-timing-function: cubic-bezier(.53, 0, .61, .73);\r\n r: 2px;\r\n }\r\n }\r\n "), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU", cx: 12, cy: 3, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_GWtZ", cx: 16.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_n0Yb", cx: 7.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_dwN6", cx: 19.79, cy: 7.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_GIL4", cx: 4.21, cy: 7.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_46QP", cx: 21, cy: 12, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_DQhX", cx: 3, cy: 12, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_PD82", cx: 19.79, cy: 16.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_tVmX", cx: 4.21, cy: 16.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_eUgh", cx: 16.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_j38H", cx: 7.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_eUaP", cx: 12, cy: 21, r: 0 }));
14672
+
14645
14673
  const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
14646
14674
  let siblingsArray = parentSiblings;
14647
14675
  let isLastNode = isLast;
@@ -14667,48 +14695,82 @@ const TableCell = /*#__PURE__*/React__default.memo(({
14667
14695
  onCheckBoxChange,
14668
14696
  onToggleExpand,
14669
14697
  onAddConfirm,
14670
- onAddCancel
14671
- }) => jsxs("td", {
14672
- className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
14673
- children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxs("div", {
14674
- className: "tree-title-container",
14675
- children: [col.isTree && jsx("span", {
14676
- className: `tree-table-space-block last-block ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
14677
- onClick: () => onToggleExpand(node),
14678
- children: node.container && node?.resourceCount + node?.subContainerCount > 0 && jsxs("span", {
14679
- onClick: () => onToggleExpand(node),
14680
- children: [' ', jsx(SvgArrowsDownIcon, {})]
14681
- })
14682
- }), jsxs("span", {
14683
- className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
14684
- children: [!node?.isNewNode && jsxs(Fragment, {
14685
- children: [col.isTree && select === 'checkbox' && jsx(Checkbox, {
14686
- checked: node?.checked || false,
14687
- partial: node?.checked === 'partial',
14688
- onChange: e => onCheckBoxChange(e, node)
14689
- }), col.isTree && select === 'radio' && jsx(RadioButton, {
14690
- name: node.title,
14691
- checked: selected.includes(node.key),
14692
- value: node.key,
14693
- onChange: e => onCheckBoxChange(e, node)
14698
+ onAddCancel,
14699
+ isExpanding
14700
+ }) => {
14701
+ useEffect(() => {
14702
+ const handleHover = (event, isHovering) => {
14703
+ const target = event.target;
14704
+ const levelClass = Array.from(target.classList).find(cls => cls.startsWith('tree-table-space-block-'));
14705
+ if (levelClass) {
14706
+ const level = levelClass.split('-').pop();
14707
+ // Check if level is valid before selecting elements
14708
+ if (level) {
14709
+ const sameLevelBlocks = document.querySelectorAll(`.tree-table-space-block-${level}`);
14710
+ sameLevelBlocks.forEach(block => {
14711
+ if (isHovering) {
14712
+ block.classList.add('tree-table-hovered');
14713
+ } else {
14714
+ block.classList.remove('tree-table-hovered');
14715
+ }
14716
+ });
14717
+ }
14718
+ }
14719
+ };
14720
+ const spaceBlocks = document.querySelectorAll('.tree-table-space-block');
14721
+ spaceBlocks.forEach(block => {
14722
+ block.addEventListener('mouseenter', e => handleHover(e, true));
14723
+ block.addEventListener('mouseleave', e => handleHover(e, false));
14724
+ });
14725
+ return () => {
14726
+ spaceBlocks.forEach(block => {
14727
+ block.removeEventListener('mouseenter', e => handleHover(e, true));
14728
+ block.removeEventListener('mouseleave', e => handleHover(e, false));
14729
+ });
14730
+ };
14731
+ }, []);
14732
+ return jsxs("td", {
14733
+ className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
14734
+ children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxs("div", {
14735
+ className: "tree-title-container",
14736
+ children: [col.isTree && jsx("span", {
14737
+ className: `tree-table-space-block tree-table-space-block-${node.hierarchy} last-block ${node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
14738
+ children: node.container && (node?.resourceCount + node?.subContainerCount > 0 || node.expandable) && jsxs("span", {
14739
+ onClick: () => onToggleExpand(node),
14740
+ children: [' ', isExpanding ? jsx(SvgSpinner, {}) : jsx(SvgArrowsDownIcon, {})]
14741
+ })
14742
+ }), jsxs("span", {
14743
+ className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
14744
+ children: [!node?.isNewNode && jsxs(Fragment, {
14745
+ children: [col.isTree && select === 'checkbox' && jsx(Checkbox, {
14746
+ checked: node?.checked || false,
14747
+ partial: node?.checked === 'partial',
14748
+ onChange: e => onCheckBoxChange(e, node)
14749
+ }), col.isTree && select === 'radio' && jsx(RadioButton, {
14750
+ name: node.key,
14751
+ checked: selected.includes(node.key),
14752
+ value: node.key,
14753
+ onChange: e => onCheckBoxChange(e, node)
14754
+ })]
14755
+ }), node.isNewNode && col.isTree ? jsx(AddModule, {
14756
+ onCancel: onAddCancel,
14757
+ onConfirm: onAddConfirm,
14758
+ error: node?.error || '',
14759
+ value: node.value,
14760
+ label: node?.label || ''
14761
+ }) : jsx("span", {
14762
+ className: "tree-table-td-content-text",
14763
+ children: prepareData(node, col)
14694
14764
  })]
14695
- }), node.isNewNode && col.isTree ? jsx(AddModule, {
14696
- onCancel: onAddCancel,
14697
- onConfirm: onAddConfirm,
14698
- error: node?.error || '',
14699
- value: node.value
14700
- }) : jsx("span", {
14701
- className: "tree-table-td-content-text",
14702
- children: prepareData(node, col)
14703
14765
  })]
14766
+ }), col.actions && !node?.isNewNode && jsx("div", {
14767
+ className: `table-tree-row-action`,
14768
+ children: (() => {
14769
+ return col.actions(node, treeRowRef);
14770
+ })()
14704
14771
  })]
14705
- }), col.actions && jsx("div", {
14706
- className: `table-tree-row-action`,
14707
- children: (() => {
14708
- return col.actions(node, treeRowRef);
14709
- })()
14710
- })]
14711
- }));
14772
+ });
14773
+ });
14712
14774
 
14713
14775
  const TableRow = /*#__PURE__*/React__default.memo(({
14714
14776
  node,
@@ -14719,7 +14781,8 @@ const TableRow = /*#__PURE__*/React__default.memo(({
14719
14781
  onToggleExpand,
14720
14782
  onCheckBoxChange,
14721
14783
  onAddConfirm,
14722
- onAddCancel
14784
+ onAddCancel,
14785
+ isExpanding
14723
14786
  }) => {
14724
14787
  const treeRowRef = useRef(null);
14725
14788
  return jsx("tr", {
@@ -14736,7 +14799,8 @@ const TableRow = /*#__PURE__*/React__default.memo(({
14736
14799
  onCheckBoxChange: onCheckBoxChange,
14737
14800
  onToggleExpand: onToggleExpand,
14738
14801
  onAddConfirm: onAddConfirm,
14739
- onAddCancel: onAddCancel
14802
+ onAddCancel: onAddCancel,
14803
+ isExpanding: isExpanding
14740
14804
  }, col.name))
14741
14805
  });
14742
14806
  });
@@ -14746,7 +14810,8 @@ const addNewRow = (treeData, newNode) => {
14746
14810
  sourceId,
14747
14811
  action,
14748
14812
  value = '',
14749
- error = ''
14813
+ error = '',
14814
+ label
14750
14815
  } = newNode;
14751
14816
  if (!sourceId || !action) return treeData;
14752
14817
  const nodeMap = new Map(treeData.map(node => [node.key, node]));
@@ -14760,7 +14825,8 @@ const addNewRow = (treeData, newNode) => {
14760
14825
  isNewNode: true,
14761
14826
  key: 'new-node',
14762
14827
  value,
14763
- error
14828
+ error,
14829
+ label
14764
14830
  };
14765
14831
  switch (action) {
14766
14832
  case 'addAbove':
@@ -14789,7 +14855,8 @@ const TableBody = ({
14789
14855
  onCheckBoxChange,
14790
14856
  newNode = {},
14791
14857
  onAddConfirm,
14792
- onAddCancel
14858
+ onAddCancel,
14859
+ expanding
14793
14860
  }) => {
14794
14861
  if (checkEmpty(flattenedTreeData)) {
14795
14862
  return null;
@@ -14807,7 +14874,8 @@ const TableBody = ({
14807
14874
  onToggleExpand: node => onToggleExpand(node, index),
14808
14875
  onCheckBoxChange: onCheckBoxChange,
14809
14876
  onAddConfirm: onAddConfirm,
14810
- onAddCancel: onAddCancel
14877
+ onAddCancel: onAddCancel,
14878
+ isExpanding: node.key === expanding
14811
14879
  }, node.key)), jsx("tr", {
14812
14880
  id: "ff-table-tree-last-node"
14813
14881
  })]
@@ -14850,14 +14918,11 @@ const TreeTable = ({
14850
14918
  loadMore = () => {},
14851
14919
  tableBorder,
14852
14920
  height = 'auto',
14853
- newNode = {
14854
- action: 'addInside',
14855
- sourceId: 'PAG1013',
14856
- value: 'newNode'
14857
- },
14921
+ newNode = {},
14858
14922
  onAddConfirm = _name => {},
14859
14923
  onAddCancel = () => {}
14860
14924
  }) => {
14925
+ const [expanding, setExpanding] = useState(null);
14861
14926
  const observerRef = useRef(null);
14862
14927
  const isTriggeredAbove = useRef(false); // Track if pagination for "above" direction has been triggered
14863
14928
  const isTriggeredBelow = useRef(false); // Track if pagination for "below" direction has been triggered
@@ -14929,11 +14994,33 @@ const TreeTable = ({
14929
14994
  throttledLoadMore.cancel();
14930
14995
  };
14931
14996
  }, [treeData, throttledLoadMore]);
14932
- const handleToggleExpand = useCallback((node, index) => onExpand?.(node, index), [onExpand]);
14997
+ useEffect(() => {
14998
+ if (expanding) {
14999
+ setExpanding(null);
15000
+ }
15001
+ }, [treeData]);
15002
+ useEffect(() => {
15003
+ if (expanding) {
15004
+ setTimeout(() => {
15005
+ if (expanding) {
15006
+ setExpanding(null);
15007
+ }
15008
+ }, 3000);
15009
+ }
15010
+ }, [expanding]);
15011
+ const handleToggleExpand = useCallback((node, index) => {
15012
+ if (expanding) return;
15013
+ setExpanding(node.key);
15014
+ onExpand?.(node, index);
15015
+ }, [onExpand]);
14933
15016
  const handleCheckBoxChange = useCallback((e, node) => {
15017
+ if (expanding) return;
14934
15018
  onChange?.(e, node);
14935
15019
  }, [onChange]);
14936
- const handleRowClick = useCallback((e, node) => onClick?.(e, node), [onClick]);
15020
+ const handleRowClick = useCallback((e, node) => {
15021
+ if (expanding) return;
15022
+ onClick?.(e, node);
15023
+ }, [onClick]);
14937
15024
  return jsx("div", {
14938
15025
  className: "tree-table-wrap",
14939
15026
  children: jsx("div", {
@@ -14957,13 +15044,13 @@ const TreeTable = ({
14957
15044
  onCheckBoxChange: handleCheckBoxChange,
14958
15045
  newNode: newNode,
14959
15046
  onAddConfirm: onAddConfirm,
14960
- onAddCancel: onAddCancel
15047
+ onAddCancel: onAddCancel,
15048
+ expanding: expanding
14961
15049
  })]
14962
15050
  })
14963
15051
  })
14964
15052
  });
14965
15053
  };
14966
- var TableTree = /*#__PURE__*/memo(TreeTable);
14967
15054
 
14968
15055
  var css_248z$P = ":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 --dataset-tooltip-title: #($dataset-tooltip-title),\n --dataset-tooltip-value: #($dataset-tooltip-value), ;\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 8px;\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}";
14969
15056
  styleInject(css_248z$P);
@@ -27281,12 +27368,13 @@ const PieChart = ({
27281
27368
  });
27282
27369
  };
27283
27370
 
27284
- var css_248z$F = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n z-index: 1000;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 4px;\n padding-bottom: 16px;\n}\n.ff-app-header-main .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-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .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 flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .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 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .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-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .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-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .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 overflow: hidden;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 8px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
27371
+ var css_248z$F = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n z-index: 1000;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 4px;\n padding-bottom: 16px;\n}\n.ff-app-header-main .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-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .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 flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .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 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .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-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .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-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .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 overflow: hidden;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 8px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .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 .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n margin-left: 8px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-menuicon-container {\n width: 40px !important;\n height: 32px !important;\n border-radius: 16px !important;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
27285
27372
  styleInject(css_248z$F);
27286
27373
 
27287
27374
  const AppHeader = ({
27288
27375
  logoIconName = 'fireflink_icon',
27289
27376
  width,
27377
+ borderRadius,
27290
27378
  leftContent,
27291
27379
  rightContent,
27292
27380
  projectsList,
@@ -27312,6 +27400,10 @@ const AppHeader = ({
27312
27400
  className: "ff-app-header-main",
27313
27401
  children: jsxs("div", {
27314
27402
  className: "ff-app-header",
27403
+ style: {
27404
+ borderStartStartRadius: borderRadius,
27405
+ borderStartEndRadius: borderRadius
27406
+ },
27315
27407
  children: [jsxs("div", {
27316
27408
  className: "ff-app-header-left-container",
27317
27409
  children: [jsx("div", {
@@ -30391,7 +30483,8 @@ const Branches = ({
30391
30483
  readOnly
30392
30484
  }) => {
30393
30485
  const evenRow = rowIndex % 2 === 0;
30394
- const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - 1]);
30486
+ const getLastIndex = readOnly ? 0 : 1;
30487
+ const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - getLastIndex]);
30395
30488
  const getBorderStyle = (currentBranch, nextBranch) => {
30396
30489
  if (currentBranch && nextBranch && 'machineInstanceId' in currentBranch && 'machineInstanceId' in nextBranch) {
30397
30490
  return currentBranch.machineInstanceId === nextBranch.machineInstanceId ? 'dashed' : 'solid';
@@ -30548,16 +30641,18 @@ const Branches = ({
30548
30641
  color: "var(--ff-connecting-branch-color)",
30549
30642
  children: "Dataset List"
30550
30643
  })]
30551
- }), jsx(Icon, {
30552
- name: "plus_icon",
30553
- className: "ff-connecting-icon",
30554
- onClick: () => onAddRunBrowser(machineInstanceId),
30555
- color: "var(--ff-connecting-branch-color)",
30556
- hoverEffect: true
30557
- }), jsx(Typography, {
30558
- className: "ff-connecting-text",
30559
- color: "var(--ff-connecting-branch-color)",
30560
- children: "Run"
30644
+ }), !readOnly && jsxs(Fragment, {
30645
+ children: [jsx(Icon, {
30646
+ name: "plus_icon",
30647
+ className: "ff-connecting-icon",
30648
+ onClick: () => onAddRunBrowser(machineInstanceId),
30649
+ color: "var(--ff-connecting-branch-color)",
30650
+ hoverEffect: true
30651
+ }), jsx(Typography, {
30652
+ className: "ff-connecting-text",
30653
+ color: "var(--ff-connecting-branch-color)",
30654
+ children: "Run"
30655
+ })]
30561
30656
  })]
30562
30657
  }), !readOnly && jsx(Icon, {
30563
30658
  name: "delete",
@@ -51599,28 +51694,31 @@ const MachineInstances = ({
51599
51694
  datasetHeight,
51600
51695
  curveHeights,
51601
51696
  itemRefs,
51602
- datasetRef
51697
+ datasetRef,
51698
+ isReadOnlyMode
51603
51699
  }) => {
51604
51700
  return jsx(Fragment, {
51605
- children: parentNodeData?.machineInstances?.length === 0 ? jsxs(Fragment, {
51606
- children: [jsx("div", {
51607
- className: "ff-selectedMachines-connecting-line",
51608
- children: jsxs("div", {
51609
- className: "ff-line",
51610
- children: [jsx("div", {
51611
- className: "ff-left-icon"
51612
- }), jsx("div", {
51613
- className: "ff-right-icon"
51614
- })]
51615
- })
51616
- }), jsx("div", {
51617
- className: "ff-machine-instance ff-machine-env-button",
51618
- children: getChildNodeComponent({
51619
- isButton: true,
51620
- parentNodeData,
51621
- parentNodeIndex
51622
- })
51623
- })]
51701
+ children: parentNodeData?.machineInstances?.length === 0 ? jsx(Fragment, {
51702
+ children: !isReadOnlyMode && jsxs(Fragment, {
51703
+ children: [jsx("div", {
51704
+ className: "ff-selectedMachines-connecting-line",
51705
+ children: jsxs("div", {
51706
+ className: "ff-line",
51707
+ children: [jsx("div", {
51708
+ className: "ff-left-icon"
51709
+ }), jsx("div", {
51710
+ className: "ff-right-icon"
51711
+ })]
51712
+ })
51713
+ }), jsx("div", {
51714
+ className: "ff-machine-instance ff-machine-env-button",
51715
+ children: getChildNodeComponent({
51716
+ isButton: true,
51717
+ parentNodeData,
51718
+ parentNodeIndex
51719
+ })
51720
+ })]
51721
+ })
51624
51722
  }) : parentNodeData?.machineInstances?.map((childNodeData, childNodeIndex) => {
51625
51723
  const isFirstLine = childNodeIndex === 0;
51626
51724
  return jsxs("div", {
@@ -51683,26 +51781,28 @@ const MachineInstances = ({
51683
51781
  })]
51684
51782
  }, ffid())
51685
51783
  }, runLevelExecutionDataSet?.runLevelExecutionDataSetId + ffid()))
51686
- }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsxs(Fragment, {
51687
- children: [jsx("div", {
51688
- className: "ff-selectedMachines-connecting-line ff-second-line",
51689
- children: jsxs("div", {
51690
- className: "ff-line",
51691
- children: [jsx("div", {
51692
- className: "ff-left-icon"
51693
- }), jsx("div", {
51694
- className: "ff-right-icon"
51695
- })]
51696
- })
51697
- }), jsx("div", {
51698
- className: "ff-machine-instance ff-machine-env-button",
51699
- children: getChildNodeComponent({
51700
- isButton: true,
51701
- parentNodeData,
51702
- parentNodeIndex,
51703
- childNodeIndex: childNodeIndex + 1
51704
- })
51705
- })]
51784
+ }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsx(Fragment, {
51785
+ children: !isReadOnlyMode && jsxs(Fragment, {
51786
+ children: [jsx("div", {
51787
+ className: "ff-selectedMachines-connecting-line ff-second-line",
51788
+ children: jsxs("div", {
51789
+ className: "ff-line",
51790
+ children: [jsx("div", {
51791
+ className: "ff-left-icon"
51792
+ }), jsx("div", {
51793
+ className: "ff-right-icon"
51794
+ })]
51795
+ })
51796
+ }), jsx("div", {
51797
+ className: "ff-machine-instance ff-machine-env-button",
51798
+ children: getChildNodeComponent({
51799
+ isButton: true,
51800
+ parentNodeData,
51801
+ parentNodeIndex,
51802
+ childNodeIndex: childNodeIndex + 1
51803
+ })
51804
+ })]
51805
+ })
51706
51806
  })]
51707
51807
  }, ffid());
51708
51808
  })
@@ -51714,17 +51814,19 @@ const ConnectingBranch = ({
51714
51814
  getChildNodeComponent,
51715
51815
  getParentNodeComponent,
51716
51816
  getParentNodeComponentActionItems,
51717
- childNodeCurveHeight = 1.28
51817
+ childNodeCurveHeight = 1.28,
51818
+ isReadOnlyMode = false
51718
51819
  }) => {
51719
51820
  const datasetRef = useRef(null);
51720
51821
  const [datasetHeight, setDatasetHeight] = useState(0);
51721
51822
  const [curveHeights, setCurveHeights] = useState([]);
51722
51823
  const itemRefs = useRef([]);
51723
51824
  const calculateVerticalLineHeight = (machineInstances, datasetHeight, gap) => {
51724
- const totalDataSets = machineInstances.reduce((acc, instance) => {
51725
- return acc + (instance.runLevelExecutionDataSets?.length || 0);
51726
- }, 0);
51727
- return totalDataSets * datasetHeight + totalDataSets * gap;
51825
+ if (machineInstances.length === 1 && isReadOnlyMode) {
51826
+ return 0;
51827
+ }
51828
+ const totalDataSets = machineInstances.reduce((acc, instance, index) => acc + (index !== machineInstances.length - 1 || !isReadOnlyMode ? instance.runLevelExecutionDataSets?.length || 0 : 0), 0);
51829
+ return totalDataSets * (datasetHeight + gap);
51728
51830
  };
51729
51831
  useEffect(() => {
51730
51832
  if (datasetRef.current) {
@@ -51828,11 +51930,12 @@ const ConnectingBranch = ({
51828
51930
  curveHeights: curveHeights,
51829
51931
  itemRefs: itemRefs,
51830
51932
  datasetRef: datasetRef,
51831
- getChildNodeComponent: getChildNodeComponent
51933
+ getChildNodeComponent: getChildNodeComponent,
51934
+ isReadOnlyMode: isReadOnlyMode
51832
51935
  })]
51833
51936
  })]
51834
51937
  }, ffid());
51835
- }), jsx("div", {
51938
+ }), !isReadOnlyMode && jsx("div", {
51836
51939
  className: "ff-select-machine-input",
51837
51940
  style: {
51838
51941
  gridRow: `${currentRow}`
@@ -54676,5 +54779,5 @@ async function getFromIndexedDB(key) {
54676
54779
  });
54677
54780
  }
54678
54781
 
54679
- export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, Accordion, AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BASE64_REGEX, BINARY_NUMBER_REGEX, BarChart, BrowserTabs, Button$1 as Button, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, Checkbox, Chip, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_TAG_REGEX, HighlightText, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LINKEDIN_PROFILE_REGEX, LabelEditTextField, LazyLoad, LineChart, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MenuOption, MiniModal, MobileSkin, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, ProgressBar, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, SSN_REGEX, STEP_GROUP_NAME_REGEX, ScriptSwitchButton, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, TIME_REGEX, TWITTER_HANDLE_REGEX, Table$1 as Table, TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, WHITESPACE_REGEX, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getFromIndexedDB, getSequentialPayload, getTreeDetails, handleTreeNodeSect, hasDuplicateFile, rearrangeDragItem, saveFileFromBlob, saveToIndexedDB, throttle, toast, truncateText, useClickOutside, useFileDropzone, useKeyboardActions, useTheme };
54782
+ export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, Accordion, AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BASE64_REGEX, BINARY_NUMBER_REGEX, BarChart, BrowserTabs, Button$1 as Button, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, Checkbox, Chip, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_TAG_REGEX, HighlightText, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LINKEDIN_PROFILE_REGEX, LabelEditTextField, LazyLoad, LineChart, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MenuOption, MiniModal, MobileSkin, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, ProgressBar, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, SSN_REGEX, STEP_GROUP_NAME_REGEX, ScriptSwitchButton, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, TIME_REGEX, TWITTER_HANDLE_REGEX, Table$1 as Table, TreeTable as TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, WHITESPACE_REGEX, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getFromIndexedDB, getSequentialPayload, getTreeDetails, handleTreeNodeSect, hasDuplicateFile, rearrangeDragItem, saveFileFromBlob, saveToIndexedDB, throttle, toast, truncateText, useClickOutside, useFileDropzone, useKeyboardActions, useTheme };
54680
54783
  //# sourceMappingURL=index.esm.js.map