@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0

package/lib/components/features/tasks/TMTasksUtils.js

@@ -210,6 +210,21 @@ export const getTaskAssignedByMe = (tasks) => {
     const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
     return tasks.filter((task) => task.toID !== undefined && task.toID !== userID);
 };
+export const getTaskNotCompletedAssignedByMe = (tasks) => {
+    const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
+    return tasks
+        .filter((task) => task.toID !== undefined &&
+        task.toID !== userID &&
+        task.state !== Task_States.Completed).sort((a, b) => {
+        if (!a.endTime && !b.endTime)
+            return 0;
+        if (!a.endTime)
+            return 1;
+        if (!b.endTime)
+            return -1;
+        return a.endTime.getTime() - b.endTime.getTime();
+    });
+};
 export const getHeaderStatusFilterConfig = () => ({
     enabled: true,
     dataSource: getStatusLocalizatorValues().map(item => ({
@@ -298,7 +313,7 @@ export const taskValidatorAsync = async (taskDescriptor) => {
     }
     // Validate toID
     if (!taskDescriptor.toID || taskDescriptor.toID <= 0)
-        vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.AssignedTo, `${SDK_Localizator.RequiredField}`));
+        vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.AssignedTo_Female, `${SDK_Localizator.RequiredField}`));
     // Validate that startTime is less than or equal to endTime
     if (taskDescriptor.startTime && taskDescriptor.endTime) {
         if (taskDescriptor.startTime > taskDescriptor.endTime) {
@@ -318,7 +333,7 @@ const getPDGExtended = (pdg) => {
         case PdGs.WG:
             return SDKUI_Localizator.WorkGroup;
         case PdGs.CF:
-            return SDKUI_Localizator.Practice;
+            return SDKUI_Localizator.Dossier;
         case PdGs.DT:
             return SDKUI_Localizator.Document;
         case PdGs.WF:
@@ -426,7 +441,7 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
             operationType: 'multiRow',
             disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
             items: [
-                { icon: 'isblank', text: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.NotStarted) },
+                { icon: 'product', text: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.NotStarted) },
                 { icon: 'refresh', text: SDKUI_Localizator.InProgress, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.InProgress) },
                 { icon: 'check', text: SDKUI_Localizator.Completed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Completed) },
                 { icon: 'taskstop', text: SDKUI_Localizator.Pending, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Waiting) },

package/lib/components/features/tasks/TMTasksUtilsView.js

@@ -7,8 +7,8 @@ import { FormModes } from "../../../ts";
 import TMTooltip from "../../base/TMTooltip";
 const taskStateIconClassMap = () => {
     return new Map([
-        [Task_States.None, "dx-icon-isblank"],
-        [Task_States.NotStarted, "dx-icon-isblank"],
+        [Task_States.None, "dx-icon-product"],
+        [Task_States.NotStarted, "dx-icon-product"],
         [Task_States.InProgress, "dx-icon-refresh"],
         [Task_States.Completed, "dx-icon-check"],
         [Task_States.Waiting, "dx-icon-taskstop"],
@@ -35,7 +35,28 @@ export const calculateNumberOfDays = (startTime, endTime) => {
 };
 export const renderTaskIcons = (taskData) => {
     const { stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays } = taskData;
-    return (_jsxs(_Fragment, { children: [_jsxs(TMTooltip, { content: stateTooltipLabel, children: [" ", _jsx("div", { children: taskStateIconMap().get(stateLabel) })] }), _jsxs(TMTooltip, { content: gotoPDGExtendedLabel(false, pdg ?? PdGs.None, ID1Name), children: [" ", _jsx("div", { children: getPdgsIconMap().get(pdg) })] }), (stateLabel !== Task_States.Completed && endTime && taskIsExpiringSoon(endTime, remTime)) && _jsx(TMTooltip, { content: SDKUI_Localizator.Expiring, children: _jsx("i", { style: { fontSize: "24px" }, className: "dx-icon-warning" }) }), numberOfDays > 1 && _jsx("i", { title: SDKUI_Localizator.ActivityOverMultipleDays.replaceParams(numberOfDays), style: { fontSize: 20 }, className: "dx-icon-unselectall" }), isNew && _jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivity, children: _jsx("i", { style: { fontSize: "24px" }, className: "dx-icon-bell" }) })] }));
+    return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [_jsx(TMTooltip, { content: stateTooltipLabel, children: _jsx("div", { className: "task-icon", children: taskStateIconMap().get(stateLabel) }) }), (stateLabel !== Task_States.Completed && endTime && taskIsExpiringSoon(endTime, remTime)) &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.Expiring, children: _jsx("i", { className: "dx-icon-warning task-icon" }) }), _jsx(TMTooltip, { content: gotoPDGExtendedLabel(false, pdg ?? PdGs.None, ID1Name), children: _jsx("div", { className: "task-icon", style: {
+                        marginLeft: pdg === PdGs.CF || pdg === PdGs.WG ? "-4px" : undefined,
+                        marginRight: pdg === PdGs.CF || pdg === PdGs.WG ? "-4px" : undefined,
+                    }, children: getPdgsIconMap().get(pdg) }) }), numberOfDays > 1 &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.ActivityOverMultipleDays.replaceParams(numberOfDays), children: _jsx("div", { className: "task-icon", style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            minWidth: "20px",
+                            height: "20px",
+                            padding: "0 4px",
+                            borderRadius: "12px",
+                            border: "1px solid #0078d4",
+                            backgroundColor: "rgba(0, 120, 212, 0.08)",
+                            color: "#0078d4",
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            lineHeight: 1,
+                            boxSizing: "border-box"
+                        }, children: numberOfDays > 99 ? "99+" : numberOfDays }) }), isNew &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivity, children: _jsx("i", { className: "dx-icon-bell task-icon" }) })] }));
 };
 export const TMActionCalendar = (props) => {
     const { currentTask, openTaskForm, onDeleteCallback } = props;
@@ -72,7 +93,8 @@ export const priorityLegend = () => _jsx("div", { style: { display: 'flex', alig
 export const highlightTaskText = (text, search, taskId) => {
     if (!search)
         return text;
-    const regex = new RegExp(`(${search})`, 'gi');
+    const escapedSearchText = search.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedSearchText})`, 'gi');
     const parts = text.split(regex);
     return parts.map((part, index) => part.toLowerCase() === search.toLowerCase() ? (_jsx("span", { style: { color: "#fff", backgroundColor: '#0f6cbd' }, children: part }, taskId + "-" + index)) : (part));
 };

package/lib/components/features/tasks/TMTasksView.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { AssignedTab, checkIfNew, createTasksMenuItems, getHeaderPriorityFilterConfig, getHeaderStatusFilterConfig, getMondayOfCurrentWeek, getNewTaskCount, getStatusLocalizatorValue, isTaskAssignedToAnotherUser, TaskView, TEXT_NOT_SELECTED_COLOR } from "./TMTasksUtils";
+import { AssignedTab, checkIfNew, createTasksMenuItems, getHeaderPriorityFilterConfig, getHeaderStatusFilterConfig, getMondayOfCurrentWeek, getNewTaskCount, getStatusLocalizatorValue, isTaskAssignedToAnotherUser, LIGTH_CYAN, LIGTH_RED_ORGANGE, TaskView, TEXT_NOT_SELECTED_COLOR } from "./TMTasksUtils";
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
 import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
-import ContextMenu from 'devextreme-react/cjs/context-menu';
+import ContextMenu from 'devextreme-react/context-menu';
 import { calcResponsiveSizes, getExceptionMessage, SDKUI_Localizator, StyledTabItem, TMCountBadge } from "../../../helper";
 import { useDeviceType } from "../../base/TMDeviceProvider";
 import { FormModes } from "../../../ts";
@@ -362,11 +362,17 @@ const TMTasksView = (props) => {
         const isCompleted = state === Task_States.Completed;
         const isExpired = endTime && endTime < new Date();
         const isNewTask = checkIfNew(fromID, isNew);
-        return _jsx("div", { style: {
+        const priorityColor = cellData.value === Priorities.High ? LIGTH_RED_ORGANGE : LIGTH_CYAN;
+        return (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                borderLeft: `4px solid ${priorityColor}`,
+                paddingLeft: '8px',
                 color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
                 textDecoration: isCompleted ? 'line-through' : 'none',
-                fontWeight: isNewTask ? 'bold' : 'normal'
-            }, children: priorityLabel });
+                fontWeight: isNewTask ? 'bold' : 'normal',
+                height: '100%'
+            }, children: priorityLabel }));
     }, []);
     const cellDatetimeRender = useCallback((cellData) => {
         const data = cellData.data;
@@ -503,7 +509,7 @@ const TMTasksView = (props) => {
             },
             {
                 dataField: "toName",
-                caption: SDKUI_Localizator.AssignedTo,
+                caption: SDKUI_Localizator.AssignedTo_Female,
                 dataType: 'string',
                 cellRender: cellToRender,
                 headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),

package/lib/components/features/wg/TMWGsCopyMoveForm.js

@@ -419,15 +419,15 @@ const TMWGsCopyMoveForm = (props) => {
                             }, children: SDKUI_Localizator.Cancel })] })] }) });
 };
 export default TMWGsCopyMoveForm;
-const StepSpan = styled.span `
-  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
-  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
-  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
-  transition: color 0.3s ease;
-  &:hover {
-    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
-    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
-  }
+const StepSpan = styled.span `
+  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
+  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
+  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
+  transition: color 0.3s ease;
+  &:hover {
+    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
+    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
+  }
 `;
 export const TMStepNavigator = (props) => {
     const { steps, currentStep, onStepChange } = props;

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -15,55 +15,55 @@ import TMTextArea from "../../editors/TMTextArea";
 import TMDropDown from "../../editors/TMDropDown";
 import TMDateBox from "../../editors/TMDateBox";
 import ShowAlert from "../../base/TMAlert";
-const StyledWorkFlowOperationButtonsContainer = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-direction: column;
+const StyledWorkFlowOperationButtonsContainer = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-direction: column;
 `;
 const StyledTextArea = styled.textarea.attrs({
     maxLength: 200
-}) `
-    width: 100%; 
-    height: 100%; 
-    border: 1px solid ${props => props.$isValid ? '#b4b4b4' : TMColors.error}; 
-    border-radius: 10px; 
-    padding: 10px;
-    &:focus{
-        outline: none;
-        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
-    }
+}) `
+    width: 100%; 
+    height: 100%; 
+    border: 1px solid ${props => props.$isValid ? '#b4b4b4' : TMColors.error}; 
+    border-radius: 10px; 
+    padding: 10px;
+    &:focus{
+        outline: none;
+        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
+    }
 `;
-const CharacterCounter = styled.div `
-    text-align: right;
-    font-size: 0.8rem;
-    color: #6c757d;
-    margin-top: 2px;
+const CharacterCounter = styled.div `
+    text-align: right;
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 2px;
 `;
-const StyledModalBodyWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+const StyledModalBodyWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 `;
-const StyledModalFooter = styled.div `
-    padding: 16px 0 12px 0; 
-    height: 60px;
-    display: flex;
-    justify-content: center;
+const StyledModalFooter = styled.div `
+    padding: 16px 0 12px 0; 
+    height: 60px;
+    display: flex;
+    justify-content: center;
 `;
-const StyledModalContentContainer = styled.div `
-    width: 100%;
-    padding: 10px; 
-    flex: 1; /* Questo fa sì che prenda tutto lo spazio verticale disponibile */
-    overflow-y: auto; 
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
+const StyledModalContentContainer = styled.div `
+    width: 100%;
+    padding: 10px; 
+    flex: 1; /* Questo fa sì che prenda tutto lo spazio verticale disponibile */
+    overflow-y: auto; 
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
 `;
-const StyledHorizontalContainer = styled.div `
-    display: flex;
-    gap: 10px;
-    /* align-items: flex-end; */
+const StyledHorizontalContainer = styled.div `
+    display: flex;
+    gap: 10px;
+    /* align-items: flex-end; */
 `;
 export const WorkFlowOperationButtons = (props) => {
     const { dtd = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo } = props;
@@ -80,7 +80,7 @@ export const WorkFlowOperationButtons = (props) => {
             setIsSignWorkflow(false);
         }
     }, [dtd]);
-    return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), advancedColor: TMColors.success, color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: TMColors.success, color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
+    return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
 };
 export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = DeviceType.DESKTOP, isReject, selectedItems = [], onClose, onCompleted }) => {
     const [commentValue, setCommentValue] = useState('');
@@ -198,7 +198,7 @@ export const WorkFlowMoreInfoPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
         }
         // Validate toID
         if (!taskDescriptor.toID || taskDescriptor.toID <= 0)
-            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.AssignedTo, `${SDK_Localizator.RequiredField}`));
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.AssignedTo_Female, `${SDK_Localizator.RequiredField}`));
         return vil;
     };
     const requestMoreInfoAsync = async () => {
@@ -271,7 +271,7 @@ export const WorkFlowMoreInfoPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
             }
         });
     };
-    return (_jsx(TMModal, { title: SDKUI_Localizator.MoreInformation, onClose: onClose, width: deviceType === DeviceType.MOBILE ? '95%' : '640px', height: deviceType === DeviceType.MOBILE ? '60%' : '440px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMUserChooser, { width: "250px", label: SDKUI_Localizator.RequestTo, dataSource: users, values: task?.toID ? [task.toID] : [], validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo), onValueChanged: (IDs) => {
+    return (_jsx(TMModal, { title: SDKUI_Localizator.MoreInformation, onClose: onClose, width: deviceType === DeviceType.MOBILE ? '95%' : '640px', height: deviceType === DeviceType.MOBILE ? '60%' : '440px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMUserChooser, { width: "250px", label: SDKUI_Localizator.RequestTo, dataSource: users, values: task?.toID ? [task.toID] : [], validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo_Female), onValueChanged: (IDs) => {
                                 if (IDs === undefined)
                                     return;
                                 setTask({ ...task ?? {}, toID: IDs?.[0] });

package/lib/components/features/workflow/diagram/ConnectionComponent.js

@@ -3,39 +3,39 @@ import React, { useCallback } from 'react';
 import { ArrowSymbol } from './interfaces';
 import styled, { css } from 'styled-components';
 import { getConnectionColor } from './workflowHelpers';
-const StyledPath = styled.path ` // Aggiungi $isTemporary
-  fill: none;
-  stroke: ${props => getConnectionColor(props.$outputStatus)};
-  stroke-width: ${props => props.$isSelected ? 3 : 1};
-  cursor: pointer;
-  transition: stroke-width 0.1s ease-in-out;
-  pointer-events: stroke;
-
-  ${props => props.$isTemporary && css `
-    stroke: #888; 
-    stroke-dasharray: 5 5; 
-    opacity: 0.5;
-  `}
+const StyledPath = styled.path ` // Aggiungi $isTemporary
+  fill: none;
+  stroke: ${props => getConnectionColor(props.$outputStatus)};
+  stroke-width: ${props => props.$isSelected ? 3 : 1};
+  cursor: pointer;
+  transition: stroke-width 0.1s ease-in-out;
+  pointer-events: stroke;
+
+  ${props => props.$isTemporary && css `
+    stroke: #888; 
+    stroke-dasharray: 5 5; 
+    opacity: 0.5;
+  `}
 `;
 // Path invisibile e più spesso per migliorare l'area di click
-const StyledPathHitArea = styled.path `
-  fill: none;
-  stroke: transparent;
-  stroke-width: 10;
-  cursor: pointer;
-  pointer-events: stroke;
+const StyledPathHitArea = styled.path `
+  fill: none;
+  stroke: transparent;
+  stroke-width: 10;
+  cursor: pointer;
+  pointer-events: stroke;
 `;
-const StyledArrow = styled.path `
-  fill: ${props => props.$color};
-  stroke: ${props => props.$color};
-  stroke-width: 1;
-  pointer-events: none;
+const StyledArrow = styled.path `
+  fill: ${props => props.$color};
+  stroke: ${props => props.$color};
+  stroke-width: 1;
+  pointer-events: none;
 `;
-const StyledSquareConnector = styled.rect `
-  fill: #007bff;
-  stroke: #007bff;
-  stroke-width: 1;
-  pointer-events: all;
+const StyledSquareConnector = styled.rect `
+  fill: #007bff;
+  stroke: #007bff;
+  stroke-width: 1;
+  pointer-events: all;
 `;
 const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, isTemporary, onClick, onDoubleClick, onConnectionEndpointMouseDown }) => {
     const connectionColor = getConnectionColor(connection.OutputStatus);

package/lib/components/features/workflow/diagram/ConnectionForm.js

@@ -7,17 +7,17 @@ import TMModal from '../../../base/TMModal';
 import { TMColors } from '../../../../utils/theme';
 import { CultureIDs, WorkItemStatus } from '@topconsultnpm/sdk-ts';
 import TMLocalizedTextBox from '../../../editors/TMLocalizedTextBox';
-const FormContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    padding: 10px;
+const FormContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 10px;
 `;
-const ModalFooter = styled.div `
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 20px;
+const ModalFooter = styled.div `
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
 `;
 const WORKITEMSTATUS_DATASOURCE = [
     { value: WorkItemStatus.New, display: SDKUI_Localizator.WorkItemStatus_New },

package/lib/components/features/workflow/diagram/DiagramItemComponent.js

@@ -5,82 +5,82 @@ import styled, { keyframes, css } from 'styled-components';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateDiagramItemFullDimensions, FONT_SIZE, MAX_ITEM_WIDTH, MAX_LINES, PADDING_HORIZONTAL, PADDING_TOP, SPACING_SVG_TEXT, SVG_ICON_SIZE, wrapText } from './workflowHelpers';
 import { DataListCacheService } from '@topconsultnpm/sdk-ts';
-const blink = keyframes `
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+const blink = keyframes `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 `;
-const pulseAnimation = keyframes `
-0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
+const pulseAnimation = keyframes `
+0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
 `;
-const bounceAnimation = keyframes `
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(-5px);
-  }
+const bounceAnimation = keyframes `
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
 `;
-const AnimatingGroup = styled.g `
+const AnimatingGroup = styled.g `
   ${({ $isCurrent }) => $isCurrent &&
-    css `
-      animation: ${pulseAnimation} 1.5s infinite;
-    `}
+    css `
+      animation: ${pulseAnimation} 1.5s infinite;
+    `}
 `;
-const StyledDiagramItem = styled.g `
-  cursor: ${props => (props.$isReadOnly ? 'default' : (props.$isDragging ? 'grabbing' : 'grab'))};
-  filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
-  
-  & .item-main-shape {
-    fill: transparent;
+const StyledDiagramItem = styled.g `
+  cursor: ${props => (props.$isReadOnly ? 'default' : (props.$isDragging ? 'grabbing' : 'grab'))};
+  filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
+  
+  & .item-main-shape {
+    fill: transparent;
     stroke: ${props => {
     if (props.$isDragging)
         return '#ffc107';
     if (props.$isSelected)
         return '#007bff';
     return 'none';
-}};
+}};
     stroke-width: ${props => {
     if (props.$isDragging)
         return 2;
     if (props.$isSelected)
         return 2;
     return 1;
-}};
-    transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
-  }
-
-  & .item-text {
-    font-size: 11px;
-    fill: #333;
-    text-anchor: middle;
-    user-select: none;
-    pointer-events: none;
-  }
+}};
+    transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
+  }
+
+  & .item-text {
+    font-size: 11px;
+    fill: #333;
+    text-anchor: middle;
+    user-select: none;
+    pointer-events: none;
+  }
 `;
-const Connector = styled.circle `
-  fill: transparent;
-  stroke: blue;
-  stroke-width: 1;
-  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
-  opacity: ${props => (props.$isVisible ? 1 : 0)};
-  transition: opacity 0.2s ease-in-out;
+const Connector = styled.circle `
+  fill: transparent;
+  stroke: blue;
+  stroke-width: 1;
+  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
+  opacity: ${props => (props.$isVisible ? 1 : 0)};
+  transition: opacity 0.2s ease-in-out;
 `;
-const ConnectorHitArea = styled.circle `
-  fill: transparent;
-  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
-  opacity: 0;
-  pointer-events: all;
+const ConnectorHitArea = styled.circle `
+  fill: transparent;
+  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
+  opacity: 0;
+  pointer-events: all;
 `;
 const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
     const diagramItemRef = useRef(null);