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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.10.10-2",
4
+ "version": "1.10.10-4",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -31,4 +31,7 @@ export type TreeNodeProps = {
31
31
  expandable?: boolean;
32
32
  sourceId?: string;
33
33
  isNewNode?: boolean;
34
+ entityType?: string;
35
+ type?: string;
36
+ label?: string;
34
37
  };
@@ -0,0 +1,42 @@
1
+ <svg width="12" height="12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <style>
3
+ .spinner_DupU {
4
+ animation: spinner_sM3D 1.2s infinite;
5
+ fill: #71347b;
6
+ }
7
+ .spinner_GWtZ { animation-delay: .1s; }
8
+ .spinner_dwN6 { animation-delay: .2s; }
9
+ .spinner_46QP { animation-delay: .3s; }
10
+ .spinner_PD82 { animation-delay: .4s; }
11
+ .spinner_eUgh { animation-delay: .5s; }
12
+ .spinner_eUaP { animation-delay: .6s; }
13
+ .spinner_j38H { animation-delay: .7s; }
14
+ .spinner_tVmX { animation-delay: .8s; }
15
+ .spinner_DQhX { animation-delay: .9s; }
16
+ .spinner_GIL4 { animation-delay: 1s; }
17
+ .spinner_n0Yb { animation-delay: 1.1s; }
18
+
19
+ @keyframes spinner_sM3D {
20
+ 0%, 50% {
21
+ animation-timing-function: cubic-bezier(0, 1, 0, 1);
22
+ r: 0;
23
+ }
24
+ 10% {
25
+ animation-timing-function: cubic-bezier(.53, 0, .61, .73);
26
+ r: 2px;
27
+ }
28
+ }
29
+ </style>
30
+ <circle class="spinner_DupU" cx="12" cy="3" r="0" />
31
+ <circle class="spinner_DupU spinner_GWtZ" cx="16.50" cy="4.21" r="0" />
32
+ <circle class="spinner_DupU spinner_n0Yb" cx="7.50" cy="4.21" r="0" />
33
+ <circle class="spinner_DupU spinner_dwN6" cx="19.79" cy="7.50" r="0" />
34
+ <circle class="spinner_DupU spinner_GIL4" cx="4.21" cy="7.50" r="0" />
35
+ <circle class="spinner_DupU spinner_46QP" cx="21.00" cy="12.00" r="0" />
36
+ <circle class="spinner_DupU spinner_DQhX" cx="3.00" cy="12.00" r="0" />
37
+ <circle class="spinner_DupU spinner_PD82" cx="19.79" cy="16.50" r="0" />
38
+ <circle class="spinner_DupU spinner_tVmX" cx="4.21" cy="16.50" r="0" />
39
+ <circle class="spinner_DupU spinner_eUgh" cx="16.50" cy="19.79" r="0" />
40
+ <circle class="spinner_DupU spinner_j38H" cx="7.50" cy="19.79" r="0" />
41
+ <circle class="spinner_DupU spinner_eUaP" cx="12" cy="21" r="0" />
42
+ </svg>
@@ -160,6 +160,7 @@
160
160
  }
161
161
  .more-menu {
162
162
  width: 40px;
163
+ margin-left: 8px;
163
164
  display: flex;
164
165
  justify-content: center;
165
166
  .ff-app-header-more-icon {
@@ -171,6 +172,11 @@
171
172
  }
172
173
  }
173
174
  }
175
+ .more-menu .ff-menuicon-container {
176
+ width: 40px !important;
177
+ height: 32px !important;
178
+ border-radius: 16px !important;
179
+ }
174
180
  }
175
181
  .ff-app-header-left-content,
176
182
  .ff-app-header-right-content {
@@ -216,4 +222,4 @@
216
222
  max-height: 0;
217
223
  opacity: 0;
218
224
  }
219
- }
225
+ }
@@ -528,6 +528,7 @@ export const Controlled: Story = {
528
528
  <div>
529
529
  <AppHeader
530
530
  width='1120px'
531
+ borderRadius='8px'
531
532
  logoIconName="fireflink_icon"
532
533
  leftContent={headerRightSideContent}
533
534
  rightContent={headerRightSideContent}
@@ -12,6 +12,7 @@ import React, { useRef } from 'react';
12
12
  const AppHeader: React.FC<AppHeaderProps> = ({
13
13
  logoIconName = 'fireflink_icon',
14
14
  width,
15
+ borderRadius,
15
16
  leftContent,
16
17
  rightContent,
17
18
  projectsList,
@@ -31,7 +32,13 @@ const AppHeader: React.FC<AppHeaderProps> = ({
31
32
  const hiddenMenuref = useRef<HTMLDivElement>(null);
32
33
  return (
33
34
  <div className="ff-app-header-main">
34
- <div className="ff-app-header">
35
+ <div
36
+ className="ff-app-header"
37
+ style={{
38
+ borderStartStartRadius: borderRadius,
39
+ borderStartEndRadius: borderRadius,
40
+ }}
41
+ >
35
42
  <div className="ff-app-header-left-container">
36
43
  <div className="ff-app-header-logo-icon">
37
44
  <Icon color="" name={logoIconName} height={24} width={21} />
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
2
2
  import { optionsType } from '../AllProjectsDropdown/types';
3
3
  export interface AppHeaderProps {
4
4
  width?: string;
5
+ borderRadius?:string;
5
6
  logoIconName: string;
6
7
  leftContent?: ReactNode;
7
8
  rightContent?: ReactNode;
@@ -16,24 +16,29 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
16
16
  curveHeights,
17
17
  itemRefs,
18
18
  datasetRef,
19
+ isReadOnlyMode,
19
20
  }) => {
20
21
  return (
21
22
  <>
22
23
  {parentNodeData?.machineInstances?.length === 0 ? (
23
24
  <>
24
- <div className="ff-selectedMachines-connecting-line">
25
- <div className="ff-line">
26
- <div className="ff-left-icon"></div>
27
- <div className="ff-right-icon"></div>
28
- </div>
29
- </div>
30
- <div className="ff-machine-instance ff-machine-env-button">
31
- {getChildNodeComponent({
32
- isButton: true,
33
- parentNodeData,
34
- parentNodeIndex,
35
- })}
36
- </div>
25
+ {!isReadOnlyMode && (
26
+ <>
27
+ <div className="ff-selectedMachines-connecting-line">
28
+ <div className="ff-line">
29
+ <div className="ff-left-icon"></div>
30
+ <div className="ff-right-icon"></div>
31
+ </div>
32
+ </div>
33
+ <div className="ff-machine-instance ff-machine-env-button">
34
+ {getChildNodeComponent({
35
+ isButton: true,
36
+ parentNodeData,
37
+ parentNodeIndex,
38
+ })}
39
+ </div>
40
+ </>
41
+ )}
37
42
  </>
38
43
  ) : (
39
44
  parentNodeData?.machineInstances?.map(
@@ -129,21 +134,25 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
129
134
  {childNodeIndex ===
130
135
  parentNodeData.machineInstances.length - 1 && (
131
136
  <>
132
- <div className="ff-selectedMachines-connecting-line ff-second-line">
133
- <div className="ff-line">
134
- <div className="ff-left-icon"></div>
135
- <div className="ff-right-icon"></div>
136
- </div>
137
- </div>
137
+ {!isReadOnlyMode && (
138
+ <>
139
+ <div className="ff-selectedMachines-connecting-line ff-second-line">
140
+ <div className="ff-line">
141
+ <div className="ff-left-icon"></div>
142
+ <div className="ff-right-icon"></div>
143
+ </div>
144
+ </div>
138
145
 
139
- <div className="ff-machine-instance ff-machine-env-button">
140
- {getChildNodeComponent({
141
- isButton: true,
142
- parentNodeData,
143
- parentNodeIndex,
144
- childNodeIndex: childNodeIndex + 1,
145
- })}
146
- </div>
146
+ <div className="ff-machine-instance ff-machine-env-button">
147
+ {getChildNodeComponent({
148
+ isButton: true,
149
+ parentNodeData,
150
+ parentNodeIndex,
151
+ childNodeIndex: childNodeIndex + 1,
152
+ })}
153
+ </div>
154
+ </>
155
+ )}
147
156
  </>
148
157
  )}
149
158
  </div>
@@ -52,3 +52,13 @@ export const Default: Story = {
52
52
  getChildNodeComponent,
53
53
  },
54
54
  };
55
+
56
+ export const readOnly: Story = {
57
+ args: {
58
+ data: machineData,
59
+ getParentNodeComponent,
60
+ getParentNodeComponentActionItems,
61
+ getChildNodeComponent,
62
+ isReadOnlyMode: true,
63
+ },
64
+ };
@@ -17,21 +17,31 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
17
17
  getParentNodeComponent,
18
18
  getParentNodeComponentActionItems,
19
19
  childNodeCurveHeight = 1.28,
20
+ isReadOnlyMode = false,
20
21
  }) => {
21
22
  const datasetRef = useRef<HTMLDivElement | null>(null);
22
23
  const [datasetHeight, setDatasetHeight] = useState<number>(0);
23
24
  const [curveHeights, setCurveHeights] = useState<number[]>([]);
24
25
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
25
-
26
26
  const calculateVerticalLineHeight = (
27
27
  machineInstances: MachineInstance[],
28
28
  datasetHeight: number,
29
29
  gap: number
30
30
  ): number => {
31
- const totalDataSets = machineInstances.reduce((acc, instance) => {
32
- return acc + (instance.runLevelExecutionDataSets?.length || 0);
33
- }, 0);
34
- return totalDataSets * datasetHeight + totalDataSets * gap;
31
+ if (machineInstances.length === 1 && isReadOnlyMode) {
32
+ return 0;
33
+ }
34
+
35
+ const totalDataSets = machineInstances.reduce(
36
+ (acc, instance, index) =>
37
+ acc +
38
+ (index !== machineInstances.length - 1 || !isReadOnlyMode
39
+ ? instance.runLevelExecutionDataSets?.length || 0
40
+ : 0),
41
+ 0
42
+ );
43
+
44
+ return totalDataSets * (datasetHeight + gap);
35
45
  };
36
46
 
37
47
  useEffect(() => {
@@ -165,6 +175,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
165
175
  itemRefs={itemRefs}
166
176
  datasetRef={datasetRef}
167
177
  getChildNodeComponent={getChildNodeComponent}
178
+ isReadOnlyMode={isReadOnlyMode}
168
179
  />
169
180
  </div>
170
181
  </React.Fragment>
@@ -172,25 +183,27 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
172
183
  }
173
184
  )}
174
185
  {/* Select Machine Input */}
175
- <div
176
- className="ff-select-machine-input"
177
- style={{
178
- gridRow: `${currentRow}`,
179
- }}
180
- >
181
- <ArcherElement
182
- id="lastNode"
183
- relations={[
184
- {
185
- targetId: 'rootNode',
186
- targetAnchor: 'left',
187
- sourceAnchor: 'left',
188
- },
189
- ]}
186
+ {!isReadOnlyMode && (
187
+ <div
188
+ className="ff-select-machine-input"
189
+ style={{
190
+ gridRow: `${currentRow}`,
191
+ }}
190
192
  >
191
- <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
192
- </ArcherElement>
193
- </div>
193
+ <ArcherElement
194
+ id="lastNode"
195
+ relations={[
196
+ {
197
+ targetId: 'rootNode',
198
+ targetAnchor: 'left',
199
+ sourceAnchor: 'left',
200
+ },
201
+ ]}
202
+ >
203
+ <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
204
+ </ArcherElement>
205
+ </div>
206
+ )}
194
207
  </div>
195
208
  </ArcherContainer>
196
209
  </div>
@@ -19,6 +19,7 @@ export interface MachineInstancesProps {
19
19
  itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
20
20
  datasetRef: React.RefObject<HTMLDivElement>;
21
21
  getChildNodeComponent: FC<ConnectingNodeConfig>;
22
+ isReadOnlyMode?: boolean;
22
23
  }
23
24
 
24
25
  export type indexType = number;
@@ -48,4 +49,5 @@ export interface ConnectBranchProps {
48
49
  nodeArgs: ConnectingNodeConfig
49
50
  ) => ReactElement;
50
51
  getChildNodeComponent: (nodeArgs: ConnectingNodeConfig) => ReactElement;
52
+ isReadOnlyMode?: boolean;
51
53
  }
@@ -423,38 +423,62 @@ export const SelectWithToolTip: Story = {
423
423
  const optionsList = [
424
424
  {
425
425
  label: 'fire-flink-LIC4900-onPrem',
426
- value: 'fire-flink-LIC4900-onPrem',
426
+ value: {
427
+ clientId: 'fire-flink-LIC4900-onPrem',
428
+ },
429
+ name: 'fire-flink-LIC4900-onPrem',
427
430
  },
428
431
  {
429
432
  label: 'fire-flink-LIC3179',
430
- value: 'fire-flink-LIC3179',
433
+ value: {
434
+ clientId: 'fire-flink-LIC4900-onPrem',
435
+ },
436
+ name: 'fire-flink-LIC3179',
431
437
  },
432
438
  {
433
439
  label: 'fire-flink-LIC4937',
434
- value: 'fire-flink-LIC4937',
440
+ value: {
441
+ clientId: 'fire-flink-LIC4900-onPrem',
442
+ },
443
+ name: 'fire-flink-LIC4937',
435
444
  },
436
445
  {
437
446
  label: 'fire-flink-LIC5937',
438
- value: 'fire-flink-LIC5937',
447
+ value: {
448
+ clientId: 'fire-flink-LIC4900-onPrem',
449
+ },
450
+ name: 'fire-flink-LIC5937',
439
451
  },
440
452
  {
441
453
  label: 'fire-flink-LIC6937',
442
- value: 'fire-flink-LIC6937',
454
+ value: {
455
+ clientId: 'fire-flink-LIC4900-onPrem',
456
+ },
457
+ name: 'fire-flink-LIC6937',
443
458
  },
444
459
  {
445
460
  label: 'fire-flink-LIC7937',
446
- value: 'fire-flink-LIC7937',
461
+ value: {
462
+ clientId: 'fire-flink-LIC4900-onPrem',
463
+ },
464
+ name: 'fire-flink-LIC7937',
447
465
  },
448
466
  {
449
467
  label: 'fire-flink-LIC4999',
450
- value: 'fire-flink-LIC4999',
468
+ value: {
469
+ clientId: 'fire-flink-LIC4900-onPrem',
470
+ },
471
+ name: 'fire-flink-LIC4999',
451
472
  recurrence: true,
452
- },
473
+ },
453
474
  ];
454
475
 
455
476
  const [selectedOption, setSelectedOption] = useState<Option>({
456
477
  label: '',
457
- value: '',
478
+ value: {
479
+ clientId: '',
480
+ },
481
+ name: '',
458
482
  });
459
483
 
460
484
  const handleChange = (option: Option) => {
@@ -466,7 +490,6 @@ export const SelectWithToolTip: Story = {
466
490
  <h1>Test Mini Modal</h1>
467
491
  </>
468
492
  );
469
-
470
493
  return (
471
494
  <Select
472
495
  optionsList={optionsList}
@@ -475,6 +498,7 @@ export const SelectWithToolTip: Story = {
475
498
  label="Select Option"
476
499
  showToolTip={true}
477
500
  modalJSXProps={getMiniModalJSX()}
501
+ valueAccessor="name"
478
502
  recurrence
479
503
  />
480
504
  );
@@ -292,6 +292,7 @@ const Select: FC<SelectProps> = ({
292
292
  onCancelModal={onCancelModal}
293
293
  modalJSXProps={modalJSXProps}
294
294
  recurrence={recurrence}
295
+ valueAccessor={valueAccessor}
295
296
  />,
296
297
  document.body
297
298
  )}
@@ -6,7 +6,10 @@ import Typography from '../../Typography';
6
6
  import { ffid } from '../../../utils/ffID/ffid';
7
7
  import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
8
8
  import classNames from 'classnames';
9
- import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
9
+ import {
10
+ getLabel,
11
+ getValue,
12
+ } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
10
13
  import useClickOutside from '../../../hooks/useClickOutside';
11
14
  import Icon from '../../Icon';
12
15
  import Tooltip from '../../Tooltip';
@@ -133,26 +136,26 @@ const Dropdown: FC<DropdownProps> = ({
133
136
  >
134
137
  {!checkEmpty(options) ? (
135
138
  options.map((option) => (
136
- <div
137
- className={classNames(
138
- 'ff-select-dropdown-option',
139
- {
140
- 'ff-select-dropdown-option__selected':
141
- getLabel(option, valueAccessor) === selectedOption,
142
- },
143
- currentTheme
144
- )}
145
- key={ffid()}
146
- onClick={() => {
147
- if ('disable' in option && option['disable']) return;
148
- onSelectOptionSelector(option);
149
- }}
150
- >
151
- {getOptionLabel(
152
- getLabel(option, labelAccessor),
153
- 'iconName' in option && option['iconName']
154
- )}
155
- </div>
139
+ <div
140
+ className={classNames(
141
+ 'ff-select-dropdown-option',
142
+ {
143
+ 'ff-select-dropdown-option__selected':
144
+ getValue(option, valueAccessor) === selectedOption,
145
+ },
146
+ currentTheme
147
+ )}
148
+ key={ffid()}
149
+ onClick={() => {
150
+ if ('disable' in option && option['disable']) return;
151
+ onSelectOptionSelector(option);
152
+ }}
153
+ >
154
+ {getOptionLabel(
155
+ getLabel(option, labelAccessor),
156
+ 'iconName' in option && option['iconName']
157
+ )}
158
+ </div>
156
159
  ))
157
160
  ) : (
158
161
  <Typography
@@ -31,8 +31,9 @@ const Branches = ({
31
31
  readOnly,
32
32
  }: BranchesProps) => {
33
33
  const evenRow = rowIndex % 2 === 0;
34
+ const getLastIndex = readOnly ? 0 : 1;
34
35
  const lastMachineInstance = checkEmpty(
35
- machineInstances[machineColumnCount - 1]
36
+ machineInstances[machineColumnCount - getLastIndex]
36
37
  );
37
38
 
38
39
  const getBorderStyle = (
@@ -263,19 +264,23 @@ const Branches = ({
263
264
  </Typography>
264
265
  </div>
265
266
 
266
- <Icon
267
- name="plus_icon"
268
- className="ff-connecting-icon"
269
- onClick={() => onAddRunBrowser(machineInstanceId)}
270
- color="var(--ff-connecting-branch-color)"
271
- hoverEffect
272
- />
273
- <Typography
274
- className="ff-connecting-text"
275
- color="var(--ff-connecting-branch-color)"
276
- >
277
- Run
278
- </Typography>
267
+ {!readOnly && (
268
+ <>
269
+ <Icon
270
+ name="plus_icon"
271
+ className="ff-connecting-icon"
272
+ onClick={() => onAddRunBrowser(machineInstanceId)}
273
+ color="var(--ff-connecting-branch-color)"
274
+ hoverEffect
275
+ />
276
+ <Typography
277
+ className="ff-connecting-text"
278
+ color="var(--ff-connecting-branch-color)"
279
+ >
280
+ Run
281
+ </Typography>
282
+ </>
283
+ )}
279
284
  </>
280
285
  )}
281
286
  {!readOnly && (
@@ -1,6 +1,78 @@
1
+ @use '../../../../assets/styles/fonts';
2
+
1
3
  .add-module-container {
2
4
  display: flex;
5
+
3
6
  .icons {
4
7
  cursor: pointer;
5
8
  }
6
- }
9
+
10
+ .ff-add-module-input-container {
11
+ display: flex;
12
+ flex-direction: column;
13
+ position: relative;
14
+
15
+ .ff-add-module-label-container {
16
+ display: flex;
17
+ gap: 2px;
18
+ position: absolute;
19
+ border: none;
20
+ outline: none;
21
+ line-height: 18px;
22
+ margin-top: 1px;
23
+ padding: 4px 6px;
24
+ transition: all 0.3s ease-in-out;
25
+
26
+ .ff-add-module-label {
27
+ color: var(--input-default-label-color);
28
+ }
29
+ }
30
+
31
+ .add-module-input {
32
+ height: 24px;
33
+ padding: 0px 6px;
34
+ width: 430px;
35
+ border: 0.5px solid var(--nlp-color);
36
+ border-radius: 4px;
37
+ outline: none;
38
+ line-height: 18px;
39
+ color: var(--nlp-color);
40
+ }
41
+
42
+ &:focus-within {
43
+ .ff-add-module-label-container {
44
+ top: -9px;
45
+ @extend .fontXs;
46
+ background-color: var(--input-label-bg-color);
47
+ line-height: 15px;
48
+ padding: 0px 2px;
49
+ margin-left: 10px;
50
+
51
+ .ff-add-module-label {
52
+ color: var(--nlp-color);
53
+ }
54
+ }
55
+ }
56
+
57
+ &--float {
58
+ .ff-add-module-label-container {
59
+ top: -9px;
60
+ @extend .fontXs;
61
+ background-color: var(--input-label-bg-color);
62
+ line-height: 15px;
63
+ padding: 0px 2px;
64
+ margin-left: 10px;
65
+
66
+ .ff-add-module-label {
67
+ color: var(--nlp-color);
68
+ }
69
+ }
70
+ }
71
+ }
72
+
73
+ .ff-module-icon-container {
74
+ display: flex;
75
+ gap: 8px;
76
+ align-items: center;
77
+ }
78
+ }