@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,286 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Priorities, ResultTypes, SDK_Globals, SDK_Localizator, TaskEngine, UserListCacheService, ValidationItem, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
+import styled from "styled-components";
+import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo, DateDisplayTypes, TASK_MORE_INFO_PREFIX_NAME, IconSignaturePencil, isSign4TopEnabled } from "../../../helper";
+import { TMColors } from "../../../utils/theme";
+import TMButton from "../../base/TMButton";
+import { DeviceType } from "../../base/TMDeviceProvider";
+import TMModal from "../../base/TMModal";
+import { TMExceptionBoxManager } from "../../base/TMPopUp";
+import TMSpinner from "../../base/TMSpinner";
+import TMUserChooser from "../../choosers/TMUserChooser";
+import TMTextBox from "../../editors/TMTextBox";
+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 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};
+    }
+`;
+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 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 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;
+    const isMobile = deviceType === DeviceType.MOBILE;
+    // Stato per distinguere workflow di firma vs approvazione
+    const [isSignWorkflow, setIsSignWorkflow] = useState(false);
+    useEffect(() => {
+        // Controlla se il documento ha dei widget definiti, se il documento ha il widget SIGN4_TOP abilitato, allora è un workflow di firma
+        if (dtd && dtd.widgets && dtd.widgets.length > 0) {
+            setIsSignWorkflow(isSign4TopEnabled(dtd.widgets));
+        }
+        else {
+            // Se non ci sono widget o non è SIGN4_TOP, imposta il workflow di default (approvazione senza firma)
+            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: "#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(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: "#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('');
+    const disable = commentValue.length === 0;
+    const completeOrRejectAsync = async (isReject) => {
+        try {
+            TMSpinner.show();
+            const workflowEngine = SDK_Globals.tmSession?.NewWorkflowEngine();
+            if (!workflowEngine)
+                throw new Error("Workflow engine is not available");
+            const items = selectedItems.length > 0
+                ? selectedItems.map(({ TID, DID }) => ({ TID, DID }))
+                : [{ TID, DID }];
+            for (const { TID, DID } of items) {
+                await workflowEngine.WorkItem_CompleteOrRejectAsync(TID, DID, commentValue, isReject);
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onCompleted?.();
+            onClose?.();
+            TMSpinner.hide();
+            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: isReject === 0 ? SDKUI_Localizator.WorkitemApprove : SDKUI_Localizator.WorkitemReject, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
+        }
+    };
+    const workflowAction = isReject === 0 ? SDKUI_Localizator.Approve : SDKUI_Localizator.Reject;
+    const itemCount = selectedItems.length > 0 ? `(${selectedItems.length} workitem)` : '';
+    const title = `${workflowAction} ${itemCount}`;
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsxs("p", { style: { color: (isReject === 1 && disable) ? TMColors.error : 'black' }, children: [SDKUI_Localizator.CommentText, " ", isReject === 1 && disable && _jsx("span", { children: ` (${SDKUI_Localizator.RequiredField})` }), " "] }), _jsx(StyledTextArea, { "$isValid": isReject === 0 ? true : !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value) }), _jsx(CharacterCounter, { children: `${200 - commentValue.length} ${SDKUI_Localizator.CharactersRemaining}` })] }), _jsx(StyledModalFooter, { children: isReject === 0
+                        ? _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: false, onClick: () => completeOrRejectAsync(isReject), advancedColor: TMColors.success })
+                        : _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: disable, onClick: () => { !disable && completeOrRejectAsync(isReject); }, advancedColor: TMColors.error }) })] }) }));
+};
+export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, selectedItems = [], onCompleted }) => {
+    const [commentValue, setCommentValue] = useState('');
+    const [selectedUserID, setSelectedUserID] = useState([]);
+    const [participants, setParticipants] = useState([]);
+    const disable = commentValue.length === 0 || !selectedUserID;
+    const reAssignWorkFlowAsync = async () => {
+        try {
+            TMSpinner.show();
+            const workflowEngine = SDK_Globals.tmSession?.NewWorkflowEngine();
+            if (!workflowEngine)
+                throw new Error("Workflow engine is not available");
+            const items = selectedItems.length > 0
+                ? selectedItems.map(({ TID, DID }) => ({ TID, DID }))
+                : [{ TID, DID }];
+            for (const { TID, DID } of items) {
+                await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_ReassignAsync(TID, DID, selectedUserID?.[0], commentValue);
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onCompleted?.();
+            onClose?.();
+            TMSpinner.hide();
+            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: SDKUI_Localizator.WorkitemReassign, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
+        }
+    };
+    // Determina il TID da usare
+    const tidToUse = selectedItems?.[0]?.TID ?? TID;
+    useEffect(() => {
+        let isMounted = true;
+        const fetchData = async () => {
+            TMSpinner.show({ description: SDKUI_Localizator.LoadingParticipants });
+            try {
+                if (!tidToUse)
+                    return;
+                // Recupera info workflow
+                const wf = await WorkflowCacheService.GetWFInfoAsync(tidToUse);
+                // Recupera tutti gli utenti
+                const allUsers = await UserListCacheService.GetAllAsync();
+                // Filtra utenti partecipanti
+                const participantIds = wf?.participants?.map(p => p.userID);
+                const participantUsers = allUsers.filter(u => participantIds?.includes(u.id) && u.id !== SDK_Globals.tmSession?.SessionDescr?.userID);
+                if (isMounted)
+                    setParticipants(participantUsers);
+            }
+            catch (e) {
+                TMExceptionBoxManager.show({ exception: e });
+            }
+            finally {
+                TMSpinner.hide();
+            }
+        };
+        fetchData();
+        return () => { isMounted = false; };
+    }, [tidToUse]);
+    return (_jsx(TMModal, { onClose: onClose, width: '600px', height: '270px', isModal: true, title: SDKUI_Localizator.Reassign + (selectedItems.length > 0 ? ' (' + selectedItems.length + ' workitem)' : ''), children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMUserChooser, { dataSource: participants, values: selectedUserID, onValueChanged: (IDs) => {
+                                setSelectedUserID(IDs ?? []);
+                            } }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: [SDKUI_Localizator.CommentText, " ", commentValue.length === 0 && _jsx("span", { children: ` (${SDKUI_Localizator.RequiredField})` }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) }), _jsx(CharacterCounter, { children: `${200 - commentValue.length} ${SDKUI_Localizator.CharactersRemaining}` })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: disable, onClick: () => !disable && reAssignWorkFlowAsync(), advancedColor: TMColors.tertiary }) })] }) }));
+};
+export const WorkFlowMoreInfoPopUp = ({ DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, onCompleted }) => {
+    const [users, setUsers] = useState([]);
+    const [task, setTask] = useState();
+    const [taskOrig, setTaskOrig] = useState();
+    const [validationItems, setValidationItems] = useState([]);
+    const [nameInput, setNameInput] = useState(''); // State to hold the input value for the name
+    const disable = validationItems.filter(o => o.ResultType === ResultTypes.ERROR).length > 0;
+    const validatorMoreInfoAsync = async (taskDescriptor) => {
+        let vil = [];
+        // Validate task name
+        if (!nameInput || nameInput === "")
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Name, `${SDK_Localizator.RequiredField}`));
+        // Validate name length (max 100)
+        if (taskDescriptor.name && taskDescriptor.name.length > 100) {
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Name, SDKUI_Localizator.ValueTooLong));
+        }
+        // Validate description length (max 200)
+        if (taskDescriptor.description && taskDescriptor.description.length > 200) {
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Description, SDKUI_Localizator.ValueTooLong));
+        }
+        // Validate toID
+        if (!taskDescriptor.toID || taskDescriptor.toID <= 0)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.AssignedTo, `${SDK_Localizator.RequiredField}`));
+        return vil;
+    };
+    const requestMoreInfoAsync = async () => {
+        try {
+            TMSpinner.show();
+            // Ensure the task name includes the prefix before sending
+            const taskWithPrefix = {
+                ...task,
+                name: `${TASK_MORE_INFO_PREFIX_NAME}${nameInput}`
+            };
+            await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_MoreInfoAsync(TID, DID, taskWithPrefix);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onCompleted?.();
+            onClose?.();
+            TMSpinner.hide();
+            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: SDKUI_Localizator.MoreInformation, message: SDKUI_Localizator.MoreInfoSent, duration: 3000 });
+        }
+    };
+    useEffect(() => {
+        const fetchData = async () => {
+            TMSpinner.show({ description: SDKUI_Localizator.LoadingParticipants });
+            try {
+                let newTask = TaskEngine.NewTaskDescriptor();
+                newTask.toID = 0;
+                // Initialize nameInput from task.name if it exists and remove the prefix
+                const initialName = newTask.name?.startsWith(TASK_MORE_INFO_PREFIX_NAME)
+                    ? newTask.name.substring(TASK_MORE_INFO_PREFIX_NAME.length)
+                    : newTask.name || '';
+                setNameInput(initialName);
+                // Set task name with prefix for internal state consistency if needed by validation,
+                // or ensure validation handles it correctly. For now, we'll keep nameInput for the TMTextBox.
+                newTask.name = `${TASK_MORE_INFO_PREFIX_NAME}${initialName}`;
+                setTask(newTask);
+                setTaskOrig(structuredClone(newTask));
+                validatorMoreInfoAsync(newTask);
+                // Recupera tutti gli utenti (tranne me)
+                const allUsers = await UserListCacheService.GetAllAsync();
+                const filteredUsers = allUsers.filter(u => u.id !== SDK_Globals.tmSession?.SessionDescr?.userID);
+                setUsers(filteredUsers);
+            }
+            catch (e) {
+                TMExceptionBoxManager.show({ exception: e });
+            }
+            finally {
+                TMSpinner.hide();
+            }
+        };
+        if (!TID)
+            return;
+        fetchData();
+    }, [TID]);
+    useEffect(() => {
+        if (!task)
+            return;
+        validatorMoreInfoAsync(task).then((vil) => setValidationItems(vil));
+    }, [task]);
+    const getPriorityLocalizatorValues = () => {
+        // Filtered enum for Low and High values
+        const filteredPriorities = { Low: Priorities.Low, High: Priorities.High };
+        return Object.values(filteredPriorities).map(priority => {
+            switch (priority) {
+                case Priorities.High:
+                    return ({ value: priority, display: SDKUI_Localizator.High });
+                default:
+                    return ({ value: priority, display: SDKUI_Localizator.Low });
+            }
+        });
+    };
+    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) => {
+                                if (IDs === undefined)
+                                    return;
+                                setTask({ ...task ?? {}, toID: IDs?.[0] });
+                            } }), _jsx(TMTextBox, { label: SDKUI_Localizator.Subject, value: nameInput, isModifiedWhen: nameInput !== (taskOrig?.name?.startsWith(TASK_MORE_INFO_PREFIX_NAME) ? taskOrig.name.substring(TASK_MORE_INFO_PREFIX_NAME.length) : taskOrig?.name || ''), autoFocus: true, maxLength: 100 - TASK_MORE_INFO_PREFIX_NAME.length, onValueChanged: (e) => {
+                                const newValue = e.target.value;
+                                setNameInput(newValue);
+                                // Update task.name with the prefix
+                                setTask({ ...task ?? {}, name: `${TASK_MORE_INFO_PREFIX_NAME}${newValue}` });
+                            }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }), _jsx("p", { style: { fontStyle: 'italic', fontSize: '0.9rem' }, children: `${TASK_MORE_INFO_PREFIX_NAME}${nameInput}` }), _jsx(TMTextArea, { label: SDKUI_Localizator.Description, value: task?.description ?? '', rows: 2, maxLength: 200, isModifiedWhen: task?.description !== task?.description, onValueChanged: (e) => { setTask({ ...task ?? {}, description: e.target.value }); }, 
+                            // validationItems={validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Description)}
+                            resize: false }), _jsxs(StyledHorizontalContainer, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.Priority, width: "250px", value: task?.priority, dataSource: getPriorityLocalizatorValues(), isModifiedWhen: task?.priority !== taskOrig?.priority, onValueChanged: (e) => setTask({ ...task ?? {}, priority: e?.target?.value }) }), _jsx(TMDateBox, { width: "250px", resetTimeToZeroOnKeyPress: false, padding: "10px 0px", label: SDKUI_Localizator.ByDate, dateDisplayType: DateDisplayTypes.DateTime, value: task?.endTime, isModifiedWhen: task?.endTime !== taskOrig?.endTime, onValueChange: (value) => { setTask({ ...task ?? {}, endTime: value }); }, showClearButton: true })] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Request, disabled: disable, onClick: () => !disable && requestMoreInfoAsync(), advancedColor: TMColors.tertiary }) })] }) }));
+};

package/lib/components/features/workflow/diagram/ConnectionComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Connection, Point } from './interfaces';
+interface ConnectionComponentProps {
+    connection: Connection;
+    isSelected: boolean;
+    sourcePoint: Point;
+    sinkPoint: Point;
+    isTemporary?: boolean;
+    onClick: (id: string, event: React.MouseEvent) => void;
+    onDoubleClick: (id: string) => void;
+    onConnectionEndpointMouseDown?: (connectionId: string, endpointType: 'source' | 'sink', mouseEvent: React.MouseEvent) => void;
+}
+declare const _default: React.NamedExoticComponent<ConnectionComponentProps>;
+export default _default;

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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;
+  `}
+`;
+// 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 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 ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, isTemporary, onClick, onDoubleClick, onConnectionEndpointMouseDown }) => {
+    const connectionColor = getConnectionColor(connection.OutputStatus);
+    // Funzione per renderizzare la forma della freccia
+    const renderArrow = useCallback((arrowType, angle) => {
+        const arrowSize = 10; // Dimensione della freccia
+        let pathData = '';
+        switch (arrowType) {
+            case ArrowSymbol.Arrow:
+                // Freccia triangolare che punta a destra (poi ruotata)
+                pathData = `M 0 0 L ${-arrowSize} ${-arrowSize / 2} L ${-arrowSize} ${arrowSize / 2} Z`;
+                break;
+            case ArrowSymbol.Diamond:
+                // Rombo
+                pathData = `M 0 0 L ${-arrowSize / 2} ${-arrowSize / 2} L ${-arrowSize} 0 L ${-arrowSize / 2} ${arrowSize / 2} Z`;
+                break;
+            case ArrowSymbol.None:
+            default:
+                return null;
+        }
+        return _jsx(StyledArrow, { d: pathData, "$color": connectionColor });
+    }, [connectionColor]);
+    // Calcola la trasformazione per posizionare e ruotare la freccia
+    const calculateArrowTransform = useCallback((isSink) => {
+        // SVG temporaneo per usare i suoi metodi
+        const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        pathElement.setAttribute("d", connection.PathGeometry);
+        const length = pathElement.getTotalLength();
+        if (length === 0)
+            return '';
+        // Ottieni i punti per calcolare l'angolo all'estremità della freccia
+        // Per la freccia di destinazione (Sink), usiamo l'ultimo punto e un punto precedente
+        // Per la freccia di origine (Source), usiamo il primo punto e un punto successivo
+        const point = isSink ? pathElement.getPointAtLength(length) : pathElement.getPointAtLength(0);
+        const prevPoint = isSink ? pathElement.getPointAtLength(length - 1) : pathElement.getPointAtLength(1);
+        if (!point || !prevPoint)
+            return '';
+        const angleRad = Math.atan2(point.y - prevPoint.y, point.x - prevPoint.x);
+        const angleDeg = angleRad * 180 / Math.PI;
+        // Sposta l'origine della rotazione al punto della freccia
+        return `translate(${point.x}, ${point.y}) rotate(${angleDeg})`;
+    }, [connection.PathGeometry]);
+    const handleDoubleClick = useCallback((event) => {
+        event.stopPropagation();
+        onDoubleClick?.(connection.ID);
+    }, [onDoubleClick, connection.ID]);
+    return (_jsxs("g", { children: [_jsx(StyledPathHitArea, { d: connection.PathGeometry, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick }), _jsx(StyledPath, { d: connection.PathGeometry, "$isSelected": isSelected, "$isTemporary": isTemporary, "$outputStatus": connection.OutputStatus, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick }), connection.SinkArrowSymbol !== ArrowSymbol.None && (_jsxs("g", { transform: calculateArrowTransform(true), children: [renderArrow(connection.SinkArrowSymbol, 0), " "] })), connection.SourceArrowSymbol !== ArrowSymbol.None && (_jsx("g", { transform: calculateArrowTransform(false) + ' rotate(180)', children: renderArrow(connection.SourceArrowSymbol, 0) })), isSelected && (_jsxs(_Fragment, { children: [_jsx(StyledSquareConnector, { "$color": connectionColor, x: sourcePoint.x - 5, y: sourcePoint.y - 5, width: 10, height: 10 }), _jsx(StyledSquareConnector, { "$color": connectionColor, x: sinkPoint.x - 5, y: sinkPoint.y - 5, width: 10, height: 10, cursor: 'move', onMouseDown: (e) => {
+                            e.stopPropagation(); // Impedisce la propagazione dell'evento a elementi sottostanti
+                            onConnectionEndpointMouseDown?.(connection.ID, 'sink', e);
+                        } })] }))] }));
+};
+export default React.memo(ConnectionComponent);

package/lib/components/features/workflow/diagram/ConnectionForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Connection } from './interfaces';
+interface IConnectionFormProps {
+    connectionToEdit: Connection;
+    onClose: () => void;
+    onApply: (updatedConnection: Connection) => void;
+}
+declare const ConnectionForm: React.FC<IConnectionFormProps>;
+export default ConnectionForm;

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import { calcIsModified, IconApply, IconUndo, SDKUI_Localizator } from '../../../../helper';
+import TMButton from '../../../base/TMButton';
+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 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 },
+    { value: WorkItemStatus.Completed, display: SDKUI_Localizator.WorkItemStatus_Completed },
+    { value: WorkItemStatus.Rejected, display: SDKUI_Localizator.WorkItemStatus_Rejected }
+];
+const ConnectionForm = ({ connectionToEdit, onClose, onApply }) => {
+    const [localItem, setLocalItem] = useState(connectionToEdit);
+    const [localItemOrig] = useState(structuredClone(connectionToEdit));
+    const isModified = useMemo(() => calcIsModified(localItem, localItemOrig), [localItem, localItemOrig]);
+    const handleCancel = () => {
+        setLocalItem(localItemOrig);
+    };
+    const handleSave = () => {
+        onApply(localItem);
+        onClose();
+    };
+    const handleLocalizedDescriptionChange = useCallback((lang, newValue) => {
+        setLocalItem(prevLocalItem => {
+            const updatedItem = { ...prevLocalItem };
+            // Aggiungi la logica per aggiornare il campo corretto
+            switch (lang) {
+                case CultureIDs.It_IT:
+                    updatedItem.Description_IT = newValue;
+                    break;
+                case CultureIDs.En_US:
+                    updatedItem.Description_EN = newValue;
+                    break;
+                case CultureIDs.Fr_FR:
+                    updatedItem.Description_FR = newValue;
+                    break;
+                case CultureIDs.Pt_PT:
+                    updatedItem.Description_PT = newValue;
+                    break;
+                case CultureIDs.Es_ES:
+                    updatedItem.Description_ES = newValue;
+                    break;
+                case CultureIDs.De_DE:
+                    updatedItem.Description_DE = newValue;
+                    break;
+                default:
+                    updatedItem.Description = newValue;
+                    break;
+            }
+            return updatedItem;
+        });
+    }, []);
+    // const handleOutputStatusChange = useCallback((newValue: WorkItemStatus) => {
+    //     setLocalItem(prev => ({ ...prev, OutputStatus: newValue }));
+    // }, []);
+    return (_jsx(TMModal, { title: SDKUI_Localizator.WorkflowConnectionEdit, onClose: onClose, isModal: true, width: "500px", height: "175px", children: _jsxs(FormContainer, { onClick: (e) => e.stopPropagation(), children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, isModifiedWhen: localItem.Description !== localItemOrig.Description, onValueChanged: handleLocalizedDescriptionChange }), _jsxs(ModalFooter, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.Apply, btnStyle: 'advanced', advancedColor: TMColors.tertiary, icon: _jsx(IconApply, {}), showTooltip: false, disabled: !isModified, onClick: handleSave }), _jsx(TMButton, { caption: SDKUI_Localizator.Cancel, btnStyle: 'toolbar', color: 'primary', icon: _jsx(IconUndo, {}), showTooltip: false, disabled: !isModified, onClick: handleCancel })] })] }) }));
+};
+export default ConnectionForm;

package/lib/components/features/workflow/diagram/DiagramItemComponent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DiagramItem, WfInfo } from './interfaces';
+interface DiagramItemComponentProps {
+    wf?: WfInfo | null;
+    item: DiagramItem;
+    isSelected: boolean;
+    isCurrent: boolean;
+    readOnly: boolean;
+    onClick: (id: string, event: React.MouseEvent) => void;
+    onDrag: (id: string, newX: number, newY: number) => void;
+    onDragEnd: (id: string, finalX: number, finalY: number) => void;
+    onConnectorMouseDown: (itemId: string, connectorName: string, event: React.MouseEvent) => void;
+    onConnectorMouseUp: (itemId: string, connectorName: string) => void;
+    onDimensionsChange: (itemId: string, width: number, height: number) => void;
+    onDoubleClick?: (id: string) => void;
+}
+declare const _default: React.NamedExoticComponent<DiagramItemComponentProps>;
+export default _default;