pixel-react 1.5.8 → 1.6.0

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 (72) hide show
  1. package/.storybook/main.ts +1 -7
  2. package/.storybook/preview-head.html +3 -0
  3. package/.yarn/install-state.gz +0 -0
  4. package/index.scss +5 -0
  5. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -1
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.d.ts +2 -2
  7. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +17 -1
  8. package/lib/components/Excel/Types.d.ts +22 -1
  9. package/lib/components/Excel/dataConversion.d.ts +3 -0
  10. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  11. package/lib/components/FieldSet/index.d.ts +1 -0
  12. package/lib/components/FieldSet/types.d.ts +7 -0
  13. package/lib/components/FileDropzone/types.d.ts +8 -0
  14. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  15. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  16. package/lib/components/TableTree/TableTree.d.ts +4 -24
  17. package/lib/components/TableTree/data.d.ts +78 -273
  18. package/lib/components/TableTree/types.d.ts +29 -0
  19. package/lib/index.d.ts +99 -21
  20. package/lib/index.esm.js +597 -392
  21. package/lib/index.esm.js.map +1 -1
  22. package/lib/index.js +601 -392
  23. package/lib/index.js.map +1 -1
  24. package/lib/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +2 -3
  26. package/src/assets/icons/export.svg +5 -0
  27. package/src/assets/icons/import.svg +5 -0
  28. package/src/assets/icons/info_icon.svg +4 -16
  29. package/src/assets/icons/replace_file.svg +14 -0
  30. package/src/assets/icons/web_service_icon.svg +3 -0
  31. package/src/components/Checkbox/Checkbox.tsx +1 -7
  32. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  33. package/src/components/Excel/ExcelFile/ExcelFile.tsx +60 -5
  34. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +39 -39
  35. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +34 -28
  36. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +0 -29
  37. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +29 -0
  38. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +33 -0
  39. package/src/components/Excel/ExcelFile.stories.tsx +77 -67
  40. package/src/components/Excel/Types.ts +23 -1
  41. package/src/components/Excel/dataConversion.ts +173 -0
  42. package/src/components/FieldSet/FieldSet.scss +9 -0
  43. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  44. package/src/components/FieldSet/FieldSet.tsx +29 -0
  45. package/src/components/FieldSet/index.ts +1 -0
  46. package/src/components/FieldSet/types.ts +8 -0
  47. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  48. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  49. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  50. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  51. package/src/components/FileDropzone/types.ts +8 -0
  52. package/src/components/Icon/iconList.ts +11 -7
  53. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  54. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  55. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  56. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  57. package/src/components/TableTree/TableTree.scss +154 -123
  58. package/src/components/TableTree/TableTree.stories.tsx +10 -5
  59. package/src/components/TableTree/TableTree.tsx +220 -287
  60. package/src/components/TableTree/data.ts +677 -569
  61. package/src/components/TableTree/types.ts +31 -0
  62. package/src/components/Toast/Toast.tsx +1 -1
  63. package/src/components/Typography/Typography.scss +1 -36
  64. package/src/index.ts +8 -0
  65. package/src/assets/fonts/Poppins-Bold.ttf +0 -0
  66. package/src/assets/fonts/Poppins-Bold.woff2 +0 -0
  67. package/src/assets/fonts/Poppins-Medium.ttf +0 -0
  68. package/src/assets/fonts/Poppins-Medium.woff2 +0 -0
  69. package/src/assets/fonts/Poppins-Regular.ttf +0 -0
  70. package/src/assets/fonts/Poppins-Regular.woff2 +0 -0
  71. package/src/assets/fonts/Poppins-SemiBold.ttf +0 -0
  72. package/src/assets/fonts/Poppins-SemiBold.woff2 +0 -0
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import classNames from 'classnames';
3
3
  import * as Actions from './actions';
4
+ import * as Point from './point';
4
5
  import * as Types from './types';
5
6
  import useDispatch from './use-dispatch';
6
7
  import useSelector from './use-selector';
@@ -15,7 +16,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
15
16
  deleteRow,
16
17
  data,
17
18
  }) => {
18
- const [height, setHeight] = React.useState(0);
19
+ const dispatch = useDispatch();
20
+ const rowHeight = useSelector(
21
+ (state) => state.rowDimensions[row]?.height || 28
22
+ );
19
23
 
20
24
  const options = [
21
25
  {
@@ -38,37 +42,38 @@ const RowIndicator: Types.RowIndicatorComponent = ({
38
42
  },
39
43
  ];
40
44
 
41
- const onMouseDown = (e: React.MouseEvent) => {
42
- const startY = e.clientY;
45
+ const onMouseDown = React.useCallback(
46
+ (event: React.MouseEvent) => {
47
+ onSelect(row, event.shiftKey);
43
48
 
44
- const onMouseMove = (moveEvent: MouseEvent) => {
45
- const newHeight = height + (moveEvent.clientY - startY);
46
- setHeight(newHeight);
49
+ const startY = event.clientY;
50
+ const initialHeight = rowHeight;
47
51
 
48
- const selectedAllRow = document.querySelector(
49
- '.ff-spreadsheet-floating-rect--selected'
50
- );
51
- const selectedSingleRow = document.querySelector(
52
- '.ff-spreadsheet-active-cell'
53
- );
52
+ const onMouseMove = (moveEvent: MouseEvent) => {
53
+ const newHeight = Math.max(
54
+ 28,
55
+ initialHeight + (moveEvent.clientY - startY)
56
+ );
57
+ dispatch(Actions.setRowHeight(row, newHeight));
58
+ };
54
59
 
55
- if (
56
- selectedAllRow instanceof HTMLElement &&
57
- selectedSingleRow instanceof HTMLElement
58
- ) {
59
- selectedAllRow.style.height = `${newHeight}px`;
60
- selectedSingleRow.style.height = `${newHeight}px`;
61
- }
62
- };
60
+ const onMouseUp = () => {
61
+ document.removeEventListener('mousemove', onMouseMove);
62
+ document.removeEventListener('mouseup', onMouseUp);
63
+ dispatch(Actions.dragEnd());
64
+ };
63
65
 
64
- const onMouseUp = () => {
65
- document.removeEventListener('mousemove', onMouseMove);
66
- document.removeEventListener('mouseup', onMouseUp);
67
- };
66
+ document.addEventListener('mousemove', onMouseMove);
67
+ document.addEventListener('mouseup', onMouseUp);
68
+ dispatch(Actions.dragEnd());
69
+ },
70
+ [onSelect, rowHeight, row]
71
+ );
68
72
 
69
- document.addEventListener('mousemove', onMouseMove);
70
- document.addEventListener('mouseup', onMouseUp);
71
- };
73
+ const activate = React.useCallback(
74
+ (point: Point.Point) => dispatch(Actions.activate(point)),
75
+ [dispatch]
76
+ );
72
77
 
73
78
  const handleClick = React.useCallback(
74
79
  (event: React.MouseEvent) => {
@@ -97,7 +102,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
97
102
 
98
103
  return (
99
104
  <th
100
- style={{ height: `${height}px`, minWidth: '60px', position: 'relative' }}
105
+ style={{ height: `${rowHeight}px`, position: 'relative' }} //Dynamic value, Inline Styling required
101
106
  className={classNames('ff-spreadsheet-header', {
102
107
  'ff-spreadsheet-header--selected': selected,
103
108
  })}
@@ -108,6 +113,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
108
113
  {label !== undefined ? label : row + 1}
109
114
  <div
110
115
  onMouseDown={onMouseDown}
116
+ onClick={() => activate({ row, column: -1 })}
111
117
  style={{
112
118
  zIndex: 'inherit',
113
119
  height: '2px',
@@ -75,35 +75,6 @@
75
75
  text-align: left;
76
76
  box-sizing: border-box;
77
77
  user-select: none;
78
-
79
- .ff-option-card {
80
- position: absolute;
81
- border: 1px solid var(--option-card-border-color);
82
- background: var(--option-card-bg-color);
83
- border-radius: 4px;
84
- margin: 2px;
85
- min-height: 32px;
86
- min-width: 111px;
87
- z-index: 100000;
88
- white-space: nowrap;
89
-
90
- .ff-options {
91
- @extend .fontSm;
92
- cursor: pointer;
93
- border-radius: 4px;
94
- display: flex;
95
- align-items: center;
96
- padding: 8px;
97
- line-height: 16px;
98
- gap: 8px;
99
- &:hover {
100
- background-color: var(--hover-color);
101
- }
102
- label {
103
- cursor: pointer;
104
- }
105
- }
106
- }
107
78
  }
108
79
 
109
80
  .ff-spreadsheet-header {
@@ -44,11 +44,38 @@ export const ADD_ROW_TOP = 'ADD_ROW_TOP';
44
44
  export const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
45
45
  export const DELETE_ROW = 'DELETE_ROW';
46
46
  export const DELETE_COLUMN = 'DELETE_COLUMN';
47
+ export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
48
+ export const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
47
49
 
48
50
  export type BaseAction<T extends string> = {
49
51
  type: T;
50
52
  };
51
53
 
54
+ export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
55
+ payload: { row: number; height: number };
56
+ };
57
+
58
+ export function setRowHeight(row: number, height: number): SetRowHeight {
59
+ return {
60
+ type: SET_ROW_HEIGHT,
61
+ payload: { row, height },
62
+ };
63
+ }
64
+
65
+ export type SetColumnPosition = BaseAction<typeof SET_COLUMN_POSITION> & {
66
+ payload: { column: number; width: number };
67
+ };
68
+
69
+ export function setColumnPosition(
70
+ column: number,
71
+ width: number
72
+ ): SetColumnPosition {
73
+ return {
74
+ type: SET_COLUMN_POSITION,
75
+ payload: { column, width },
76
+ };
77
+ }
78
+
52
79
  export type BoldStyle = BaseAction<typeof BOLD> & {
53
80
  payload: {
54
81
  data: Matrix<CellBase>;
@@ -516,4 +543,6 @@ export type Action =
516
543
  | AddColumnLeft
517
544
  | DeleteRow
518
545
  | DeleteColumn
546
+ | SetRowHeight
547
+ | SetColumnPosition
519
548
  | BlurAction;
@@ -571,6 +571,39 @@ export default function reducer(
571
571
  return state;
572
572
  }
573
573
 
574
+ case Actions.SET_ROW_HEIGHT: {
575
+ const { row, height } = action.payload;
576
+ const prevDimensions = state.rowDimensions[row] || { top: 0, height: 0 };
577
+ return {
578
+ ...state,
579
+ rowDimensions: {
580
+ ...state.rowDimensions,
581
+ [row]: {
582
+ top: prevDimensions.top,
583
+ height,
584
+ },
585
+ },
586
+ };
587
+ }
588
+
589
+ case Actions.SET_COLUMN_POSITION: {
590
+ const { column, width } = action.payload;
591
+ const prevDimensions = state.columnDimensions[column] || {
592
+ left: 0,
593
+ width: 0,
594
+ };
595
+ return {
596
+ ...state,
597
+ columnDimensions: {
598
+ ...state.columnDimensions,
599
+ [column]: {
600
+ left: prevDimensions.left,
601
+ width,
602
+ },
603
+ },
604
+ };
605
+ }
606
+
574
607
  case Actions.DRAG_START: {
575
608
  return { ...state, dragging: true };
576
609
  }
@@ -30,91 +30,101 @@ export const Default: Story = {
30
30
  excelData: {
31
31
  sheets: [
32
32
  {
33
- sheetName: 'Sheet1',
33
+ sheetName: 'fireflink',
34
34
  data: [
35
35
  [
36
36
  {
37
- value: 'A1',
37
+ value: 'Test Sample Data 1',
38
38
  style: {
39
- fontSize: '12px',
40
- fontFamily: 'Arial',
41
- color: 'var(--drawer-footer-bg)',
42
- backgroundColor: 'var(--text-bg-highlight)',
39
+ name: 'Arial',
40
+ size: 11,
41
+ bold: true,
42
+ italic: false,
43
+ color: 'ffffff', // Sample data from backend without #
44
+ backgroundColor: '434db8', // Sample data from backend without #
45
+ borderColor: 'F2F2F2', // Sample data from backend without #
46
+ border: {
47
+ top: 'NONE',
48
+ bottom: 'NONE',
49
+ left: 'NONE',
50
+ right: 'NONE',
51
+ },
52
+ alignment: {
53
+ horizontal: 'GENERAL',
54
+ vertical: 'BOTTOM',
55
+ wrapText: false,
56
+ },
43
57
  },
44
58
  },
45
59
  {
46
- value: 'SUM(A1+B1)',
47
- // isFormula:true,
60
+ value: 'Test Data 2',
48
61
  style: {
49
- fontSize: '12px',
50
- fontFamily: 'Arial',
51
- color: 'var(--text-bg-highlight)',
52
- backgroundColor: 'var(--ff-card-passed-status-bg-color)',
62
+ name: 'Arial',
63
+ size: 12,
64
+ bold: true,
65
+ italic: true,
66
+ color: 'EB5B00', // Sample data from backend without #
67
+ backgroundColor: '88C273', // Sample data from backend without #
68
+ borderColor: 'F2F2F2', // Sample data from backend without #
69
+ border: {
70
+ top: 'NONE',
71
+ bottom: 'NONE',
72
+ left: 'NONE',
73
+ right: 'NONE',
74
+ },
75
+ alignment: {
76
+ horizontal: 'GENERAL',
77
+ vertical: 'BOTTOM',
78
+ wrapText: false,
79
+ },
53
80
  },
54
81
  },
55
82
  ],
56
83
  [
57
84
  {
58
- value: 'A2',
85
+ value: 'Test Data 3',
59
86
  style: {
60
- fontSize: '12px',
61
- fontFamily: 'Arial',
62
- color: 'var(--drawer-footer-bg)',
63
- backgroundColor: 'var(--ff-card-passed-status-bg-color)',
87
+ name: 'Arial',
88
+ size: 11,
89
+ bold: false,
90
+ italic: false,
91
+ color: '000000', // Sample data from backend without #
92
+ backgroundColor: 'EB5B00', // Sample data from backend without #
93
+ borderColor: 'F2F2F2', // Sample data from backend without #
94
+ border: {
95
+ top: 'NONE',
96
+ bottom: 'NONE',
97
+ left: 'NONE',
98
+ right: 'NONE',
99
+ },
100
+ alignment: {
101
+ horizontal: 'GENERAL',
102
+ vertical: 'BOTTOM',
103
+ wrapText: false,
104
+ },
64
105
  },
65
106
  },
66
107
  {
67
- value: 'B2',
108
+ value: 'Test Sample Data 4',
68
109
  style: {
69
- fontSize: '12px',
70
- fontFamily: 'Arial',
71
- color: 'var(--ff-card-passed-status-bg-color)',
72
- backgroundColor: 'var(--text-bg-highlight)',
73
- },
74
- },
75
- ],
76
- ],
77
- },
78
- {
79
- sheetName: 'Sheet2',
80
- data: [
81
- [
82
- {
83
- value: 'Thaneshwaran',
84
- style: {
85
- fontSize: '12px',
86
- fontFamily: 'Arial',
87
- color: 'var(--text-bg-highlight)',
88
- backgroundColor: 'var(--tooltip-bg-color)',
89
- },
90
- },
91
- {
92
- value: 'waran',
93
- style: {
94
- fontSize: '12px',
95
- fontFamily: 'Arial',
96
- color: 'var(--text-bg-highlight)',
97
- backgroundColor: 'var(--ff-card-passed-status-bg-color)',
98
- },
99
- },
100
- ],
101
- [
102
- {
103
- value: 'Sheet',
104
- style: {
105
- fontSize: '12px',
106
- fontFamily: 'Arial',
107
- color: 'var(--drawer-footer-bg)',
108
- backgroundColor: 'var(--ff-card-passed-status-bg-color)',
109
- },
110
- },
111
- {
112
- value: 'Two',
113
- style: {
114
- fontSize: '12px',
115
- fontFamily: 'Arial',
116
- color: 'var(--ff-card-passed-status-bg-color)',
117
- backgroundColor: 'var(--text-bg-highlight)',
110
+ name: 'Arial',
111
+ size: 11,
112
+ bold: false,
113
+ italic: false,
114
+ color: '3D0301', // Sample data from backend without #
115
+ backgroundColor: 'C6E7FF', // Sample data from backend without #
116
+ borderColor: 'F2F2F2', // Sample data from backend without #
117
+ border: {
118
+ top: 'NONE',
119
+ bottom: 'NONE',
120
+ left: 'NONE',
121
+ right: 'NONE',
122
+ },
123
+ alignment: {
124
+ horizontal: 'GENERAL',
125
+ vertical: 'BOTTOM',
126
+ wrapText: false,
127
+ },
118
128
  },
119
129
  },
120
130
  ],
@@ -31,10 +31,32 @@ interface WorkData {
31
31
  value: string;
32
32
 
33
33
  /** Styling options for the cell */
34
- style: React.CSSProperties;
34
+ style: BackendStyle;
35
35
  type?: boolean;
36
36
  }
37
37
 
38
+ type BackendStyle = {
39
+ name: string;
40
+ size: number;
41
+ bold: boolean;
42
+ italic: boolean;
43
+ color: string;
44
+ backgroundColor: string;
45
+ borderColor: string;
46
+ underline:string;
47
+ border: {
48
+ top: string;
49
+ bottom: string;
50
+ left: string;
51
+ right: string;
52
+ };
53
+ alignment: {
54
+ horizontal: string;
55
+ vertical: string;
56
+ wrapText: boolean;
57
+ };
58
+ };
59
+
38
60
  /** A generic type to represent a 2D matrix of any type (or undefined values) */
39
61
  type Matrix<T> = (T | undefined)[][];
40
62
 
@@ -0,0 +1,173 @@
1
+ const getTextAlignment = (
2
+ alignment: string
3
+ ): 'left' | 'right' | 'center' | 'justify' => {
4
+ switch (alignment.toLowerCase()) {
5
+ case 'left':
6
+ return 'left';
7
+ case 'right':
8
+ return 'right';
9
+ case 'center':
10
+ return 'center';
11
+ case 'justify':
12
+ return 'justify';
13
+ default:
14
+ return 'left';
15
+ }
16
+ };
17
+
18
+ const getTextDecoration = (
19
+ textDecoration: string
20
+ ): 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy' => {
21
+ if (!textDecoration) {
22
+ return 'solid';
23
+ }
24
+ switch (textDecoration.toLowerCase()) {
25
+ case 'solid':
26
+ return 'solid';
27
+ case 'dotted':
28
+ return 'dotted';
29
+ case 'dashed':
30
+ return 'dashed';
31
+ case 'wavy':
32
+ return 'wavy';
33
+ default:
34
+ return 'solid';
35
+ }
36
+ };
37
+
38
+ const getTextAlignmentBack = (
39
+ alignment: 'left' | 'right' | 'center' | 'justify'
40
+ ): string => {
41
+ switch (alignment) {
42
+ case 'left':
43
+ return 'left';
44
+ case 'right':
45
+ return 'right';
46
+ case 'center':
47
+ return 'center';
48
+ case 'justify':
49
+ return 'justify';
50
+ default:
51
+ return 'left';
52
+ }
53
+ };
54
+
55
+ export const getTextDecorationBack = (
56
+ textDecoration: string
57
+ ): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
58
+ switch (textDecoration.toLowerCase()) {
59
+ case 'solid':
60
+ return 'solid';
61
+ case 'dotted':
62
+ return 'dotted';
63
+ case 'dashed':
64
+ return 'dashed';
65
+ case 'wavy':
66
+ return 'wavy';
67
+ case 'underline':
68
+ return 'NONE';
69
+ default:
70
+ return 'solid';
71
+ }
72
+ };
73
+
74
+ export function convertStyleToFrontend(
75
+ backendStyle: BackendStyle
76
+ ): React.CSSProperties {
77
+ return {
78
+ fontSize: `${backendStyle.size}px`,
79
+ fontFamily: backendStyle.name,
80
+ color: `#${backendStyle.color}`,
81
+ backgroundColor: `#${backendStyle.backgroundColor}`,
82
+ fontWeight: backendStyle.bold ? 'bold' : 'normal',
83
+ fontStyle: backendStyle.italic ? 'italic' : 'normal',
84
+ textDecoration: backendStyle.underline ? 'underline' : 'value',
85
+ textDecorationStyle: getTextDecoration(backendStyle.underline),
86
+ borderTop:
87
+ backendStyle.border.top === 'NONE'
88
+ ? 'none'
89
+ : `1px solid ${backendStyle.borderColor}`,
90
+ borderRight:
91
+ backendStyle.border.right === 'NONE'
92
+ ? 'none'
93
+ : `1px solid ${backendStyle.borderColor}`,
94
+ borderBottom:
95
+ backendStyle.border.bottom === 'NONE'
96
+ ? 'none'
97
+ : `1px solid ${backendStyle.borderColor}`,
98
+ borderLeft:
99
+ backendStyle.border.left === 'NONE'
100
+ ? 'none'
101
+ : `1px solid ${backendStyle.borderColor}`,
102
+ textAlign: getTextAlignment(backendStyle.alignment.horizontal),
103
+ };
104
+ }
105
+
106
+ const getBorderStyle = (
107
+ border: string | undefined
108
+ ): 'NONE' | 'THIN' | 'MEDIUM' | 'THICK' => {
109
+ if (!border || border === 'none') {
110
+ return 'NONE';
111
+ }
112
+ if (
113
+ border.includes('solid') ||
114
+ border.includes('dashed') ||
115
+ border.includes('dotted')
116
+ ) {
117
+ if (border.includes('2px') || border.includes('thin')) {
118
+ return 'THIN';
119
+ } else if (border.includes('3px') || border.includes('medium')) {
120
+ return 'MEDIUM';
121
+ } else if (border.includes('4px') || border.includes('thick')) {
122
+ return 'THICK';
123
+ }
124
+ }
125
+ return 'THIN';
126
+ };
127
+
128
+ export const convertStyleToBackend = (
129
+ frontendStyle: React.CSSProperties
130
+ ): BackendStyle => {
131
+ return {
132
+ name: frontendStyle.fontFamily || 'Arial',
133
+ size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
134
+ bold: frontendStyle.fontWeight === 'bold',
135
+ italic: frontendStyle.fontStyle === 'italic',
136
+ underline:"solid",
137
+ color: frontendStyle.color?.replace('#', '') || '000000',
138
+ backgroundColor:
139
+ frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
140
+ borderColor:
141
+ frontendStyle.borderTop &&
142
+ frontendStyle.borderTop.toString().includes('solid')
143
+ ? 'F2F2F2'
144
+ : '000000',
145
+ border: {
146
+ top: getBorderStyle(
147
+ frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined
148
+ ),
149
+ right: getBorderStyle(
150
+ frontendStyle.borderRight
151
+ ? frontendStyle.borderRight.toString()
152
+ : undefined
153
+ ),
154
+ bottom: getBorderStyle(
155
+ frontendStyle.borderBottom
156
+ ? frontendStyle.borderBottom.toString()
157
+ : undefined
158
+ ),
159
+ left: getBorderStyle(
160
+ frontendStyle.borderLeft
161
+ ? frontendStyle.borderLeft.toString()
162
+ : undefined
163
+ ),
164
+ },
165
+ alignment: {
166
+ horizontal: getTextAlignmentBack(
167
+ frontendStyle.textAlign as 'left' | 'right' | 'center' | 'justify'
168
+ ),
169
+ vertical: 'BOTTOM',
170
+ wrapText: false,
171
+ },
172
+ };
173
+ };
@@ -0,0 +1,9 @@
1
+ .ff_fieldSet_container {
2
+ .ff_fieldSet {
3
+ border-color: var(--ff-connecting-branch-modal-border);
4
+ border-radius: 5px;
5
+ .ff_legend_container{
6
+ display: flex;
7
+ }
8
+ }
9
+ }