@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DiagramItemTypes } from './interfaces';
+import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts';
+interface DiagramItemSvgContentProps {
+    itemType: DiagramItemTypes;
+    width: number;
+    height: number;
+    isToolboxPreview?: boolean;
+    statusData?: DataListItemDescriptor;
+}
+declare const DiagramItemSvgContent: React.FC<DiagramItemSvgContentProps>;
+export default DiagramItemSvgContent;

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DiagramItemTypes } from './interfaces'; // Assicurati che il percorso sia corretto
+import styled from 'styled-components';
+import { TMImageLibrary } from '../../../../helper';
+// Stili per il contenitore SVG nella toolbox per centrare l'elemento
+const StyledToolboxSvgContainer = styled.div `
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden; // Previene lo scroll se l'SVG è leggermente più grande
+    svg {
+        max-width: 100%;
+        max-height: 100%;
+        display: block; // Rimuove spazi extra sotto l'SVG
+    }
+`;
+const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = false, statusData }) => {
+    const PADDING = 10;
+    // ICON_SIZE e SMALL_ICON_SIZE possono essere regolati a seconda se è una preview o l'elemento reale
+    const ICON_SIZE = isToolboxPreview ? Math.min(width, height) * 0.6 : 40;
+    const SMALL_ICON_SIZE = isToolboxPreview ? Math.min(width, height) * 0.4 : 24;
+    const calculatedWidth = width;
+    const calculatedHeight = height;
+    const svgCenterX = calculatedWidth / 2;
+    const svgCenterY = calculatedHeight / 2;
+    let svgContent;
+    switch (itemType) {
+        case DiagramItemTypes.Start:
+            svgContent = (_jsxs(_Fragment, { children: [_jsx("circle", { cx: svgCenterX, cy: svgCenterY, r: Math.min(calculatedWidth, calculatedHeight) / 2 - PADDING, fill: "#28a745", stroke: "#218838", strokeWidth: "2" }), _jsx("text", { x: svgCenterX, y: svgCenterY, textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: isToolboxPreview ? "8px" : "12px", children: "START" })] }));
+            break;
+        case DiagramItemTypes.End:
+            svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 20.695 20.695", fill: "#030104", children: _jsx("g", { children: _jsx("path", { d: "M10.099,3.996l0.898,1.453L9.372,6.64L8.447,5.144L7.141,5.952L6.332,4.645L7.64,3.836l0.809,1.306L10.099,3.996z M10.181,7.946L9.374,6.64L8.066,7.448l0.807,1.306L10.181,7.946z M17.667,5.115l-0.144,0.312c-0.26,1.43-1.146,2.388-1.805,2.795c-1.426,0.881-2.903,0.353-2.964,0.331c-0.958-0.203-1.814-0.087-2.52,0.35C8.926,9.712,8.553,11.37,8.55,11.389l-0.087,0.407l5.182,8.378l-0.839,0.521L3.577,5.775C3.4,5.845,3.193,5.787,3.089,5.619C2.971,5.428,3.03,5.18,3.22,5.062l0.694-0.428C4.102,4.516,4.352,4.575,4.47,4.766C4.568,4.925,4.537,5.12,4.414,5.251l0.249,0.404l0.006-0.013C5.211,4.327,5.901,3.404,6.719,2.9c1.484-0.917,2.84-0.154,2.897-0.121c1.16,0.676,1.986,0.458,2.474,0.156c0.209-0.13,0.319-0.256,0.319-0.256c1.146-1.005,1.607-2.143,1.81-2.559c0.202-0.415,0.563,0.383,0.563,0.383L17.667,5.115z M14.049,1.209l0.209,0.338l0.513-0.4l-0.41-0.662C14.277,0.652,14.201,0.956,14.049,1.209z M8.442,10.6l-0.235,0.146l0.111,0.177C8.35,10.83,8.393,10.717,8.442,10.6z M12.691,8.188l-0.18-0.291l-0.176,0.238C12.452,8.148,12.572,8.164,12.691,8.188z M13.958,7.312L13.251,6.17l1.433-1.01l-0.809-1.306l-1.431,1.012l-0.839-1.355c-0.168,0.04-0.356,0.064-0.563,0.062L10.1,3.997L9.582,3.163C9.534,3.136,9.487,3.112,9.438,3.084C9.422,3.075,9.297,3.005,9.092,2.937L7.639,3.836L7.158,3.061C7.075,3.1,6.99,3.147,6.904,3.2C6.569,3.407,6.259,3.697,5.97,4.06l0.361,0.586L5.184,5.354C5.132,5.465,5.081,5.575,5.031,5.693l0.707,1.126L7.14,5.952l0.926,1.495L6.675,8.308l0.817,1.3l1.381-0.854l0.351,0.565c0.227-0.264,0.497-0.514,0.825-0.718c0.132-0.08,0.269-0.147,0.408-0.21l-0.276-0.446l1.632-1.176l-0.816-1.32l1.445-0.583l0.807,1.305l-1.435,0.598l0.669,1.081L13.958,7.312z M17.147,4.951l-0.021-0.034l-0.502,0.456l-0.698-1.126l0.526-0.409l-0.871-1.394L15.117,2.94l-0.858-1.39l-0.757,0.468c-0.133,0.176-0.281,0.349-0.438,0.519l0.812,1.315l1.243-0.913l0.807,1.308l-1.241,0.912l0.707,1.142l-1.396,1.072l0.576,0.93c0.312-0.065,0.639-0.182,0.961-0.381c0.205-0.127,0.397-0.282,0.576-0.461l-0.717-1.159l1.232-0.929l0.41,0.663L17.147,4.951z" }) }) }));
+            break;
+        case DiagramItemTypes.Exit:
+            svgContent = (_jsxs(_Fragment, { children: [_jsx("circle", { cx: svgCenterX, cy: svgCenterY, r: Math.min(calculatedWidth, calculatedHeight) / 2 - PADDING, fill: "#dc3545", stroke: "#c82333", strokeWidth: "2" }), _jsx("text", { x: svgCenterX, y: svgCenterY, textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: isToolboxPreview ? "8px" : "12px", children: "EXIT" })] }));
+            break;
+        case DiagramItemTypes.Condition:
+            svgContent = (_jsx("polygon", { points: `${svgCenterX},${PADDING} ${calculatedWidth - PADDING},${svgCenterY} ${svgCenterX},${calculatedHeight - PADDING} ${PADDING},${svgCenterY}`, fill: "#87d1df", stroke: "#62d3e2", strokeWidth: "2" }));
+            break;
+        case DiagramItemTypes.Status:
+            // Se i dati non sono disponibili o è una preview, mostra l'icona di fallback
+            if (isToolboxPreview || !statusData?.imageID) {
+                svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "orange", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+            }
+            else { // Altrimenti, mostra l'immagine personalizzata
+                svgContent = (_jsx("foreignObject", { x: (width - ICON_SIZE) / 2, y: (height - ICON_SIZE) / 2, width: ICON_SIZE, height: ICON_SIZE, children: _jsx("div", { onDragStart: (e) => e.preventDefault(), style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100%',
+                            height: '100%'
+                        }, children: statusData?.imageID && _jsx(TMImageLibrary, { imageID: statusData.imageID }) }) }));
+            }
+            break;
+        case DiagramItemTypes.DataEntry:
+        case DiagramItemTypes.Approval:
+            svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 512 640", fill: "green", children: _jsx("path", { fill: "green", d: "M96 128a128 128 0 1 1 256 0a128 128 0 1 1-256 0M0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3M625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }) }));
+            break;
+        case DiagramItemTypes.ExecTask:
+            svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "#1976d2", className: "item-svg", children: _jsx("path", { fill: "#1976d2", d: "M10 4a4 4 0 0 0-4 4a4 4 0 0 0 4 4a4 4 0 0 0 4-4a4 4 0 0 0-4-4m7 8a.26.26 0 0 0-.26.21l-.19 1.32c-.3.13-.59.29-.85.47l-1.24-.5c-.11 0-.24 0-.31.13l-1 1.73c-.06.11-.04.24.06.32l1.06.82a4.2 4.2 0 0 0 0 1l-1.06.82a.26.26 0 0 0-.06.32l1 1.73c.06.13.19.13.31.13l1.24-.5c.26.18.54.35.85.47l.19 1.32c.02.12.12.21.26.21h2c.11 0 .22-.09.24-.21l.19-1.32c.3-.13.57-.29.84-.47l1.23.5c.13 0 .26 0 .33-.13l1-1.73a.26.26 0 0 0-.06-.32l-1.07-.82c.02-.17.04-.33.04-.5s-.01-.33-.04-.5l1.06-.82a.26.26 0 0 0 .06-.32l-1-1.73c-.06-.13-.19-.13-.32-.13l-1.23.5c-.27-.18-.54-.35-.85-.47l-.19-1.32A.236.236 0 0 0 19 12zm-7 2c-4.42 0-8 1.79-8 4v2h9.68a7 7 0 0 1-.68-3a7 7 0 0 1 .64-2.91c-.53-.06-1.08-.09-1.64-.09m8 1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5c-.84 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5" }) }));
+            break;
+        case DiagramItemTypes.UpdateDcmt:
+            svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "#ca7bd0", className: "item-svg", children: _jsx("path", { d: "M4 6H2v14a2 2 0 002 2h14v-2H4V6m14.7 1.35l-1 1-2.05-2.05 1-1c.21-.22.56-.22.77 0l1.28 1.28c.22.21.22.56 0 .77M9 12.94l6.06-6.06 2.06 2.06L11.06 15H9v-2.06M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" }) }));
+            break;
+        case DiagramItemTypes.SignAndTimeStamp:
+            svgContent = (_jsxs(_Fragment, { children: [_jsx("rect", { x: PADDING, y: PADDING, width: calculatedWidth - 2 * PADDING, height: calculatedHeight - 2 * PADDING, fill: "#fff8e1", stroke: "#ffc107", strokeWidth: "2", rx: "5", ry: "5", className: "item-svg" }), _jsxs("svg", { x: svgCenterX - SMALL_ICON_SIZE / 2, y: svgCenterY - SMALL_ICON_SIZE / 2, width: SMALL_ICON_SIZE, height: SMALL_ICON_SIZE, viewBox: "0 0 24 24", fill: "#f57f17", className: "item-svg", children: [_jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15.5h-1v-2h1v2zm0-4h-1V9h1v4zm2 4.5h-1v-2h1v2zm0-4h-1V9h1v4zm2 4.5h-1v-2h1v2zm0-4h-1V9h1v4zm2 4.5h-1v-2h1v2zm0-4h-1V9h1v4zM12 6c-3.87 0-7 3.13-7 7s3.13 7 7 7 7-3.13 7-7-3.13-7-7-7z" }), _jsx("path", { d: "M12 8c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z", fill: "#000", opacity: "0.1" }), " ", _jsx("path", { d: "M17.75 6.75L16 8.5v-2l1.75-1.75zm-3.5 0L12.5 8.5v-2l1.75-1.75zm-3.5 0L9 8.5v-2L10.75 4.75z", fill: "#000", opacity: "0.1" }), " "] })] }));
+            break;
+        case DiagramItemTypes.Notification:
+            svgContent = (_jsxs(_Fragment, { children: [_jsx("rect", { x: PADDING, y: PADDING, width: calculatedWidth - 2 * PADDING, height: calculatedHeight - 2 * PADDING, fill: "#e1f5fe", stroke: "#4fc3f7", strokeWidth: "2", rx: "5", ry: "5", className: "item-svg" }), _jsx("svg", { x: svgCenterX - SMALL_ICON_SIZE / 2, y: svgCenterY - SMALL_ICON_SIZE / 2, width: SMALL_ICON_SIZE, height: SMALL_ICON_SIZE, viewBox: "0 0 24 24", fill: "#0288d1", className: "item-svg", children: _jsx("path", { d: "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.93 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.21 1.79-4 4-4s4 1.79 4 4v6z" }) })] }));
+            break;
+        case DiagramItemTypes.WorkGroup_Create:
+            svgContent = (_jsx(_Fragment, { children: _jsxs("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 40 40", fill: "#5e35b1", className: "item-svg", children: [_jsx("path", { fill: "#5e35b1", stroke: "#5e35b1", strokeWidth: ".5px", d: "m24.77,33.07c-1.75,0-3.17-1.42-3.17-3.17,0-1.75,1.42-3.17,3.17-3.17s3.17,1.42,3.17,3.17c0,1.75-1.42,3.17-2.47,3.17m0-5.73c-1.41,0-2.56,1.15-2.56,2.56s1.15,2.56,2.56,2.56,2.56-1.15,2.56-2.56h0c0-1.41-1.15-2.56-2.56-2.56" }), _jsx("path", { fill: "#5e35b1", stroke: "#5e35b1", strokeWidth: ".5px", d: "m30.5,38.81c-.17,0-.31-.14-.31-.31,0-3-2.43-5.43-5.43-5.43s-5.43,2.43-5.43,5.43c0,.17-.14.31-.31.31s-.31-.14-.31-.31c0-3.34,2.7-6.04,6.04-6.04s6.04,2.7,6.04,6.04c0,.17-.14.31-.31.31" }), _jsx("path", { fill: "#5e35b1", stroke: "#5e35b1", strokeWidth: ".5px", d: "m17.3,30c-1.31,0-2.38-1.06-2.38-2.38s1.06-2.38,2.38-2.38,2.38,1.06,2.38,2.38h0c0,1.31-1.06,2.37-2.38,2.38m0-4.14c-.97,0-1.76.79-1.76,1.76s.79,1.76,1.76,1.76,1.76-.79,1.76-1.76h0c0-.97-.79-1.76-1.76-1.76" }), _jsx("path", { fill: "#5e35b1", stroke: "#5e35b1", strokeWidth: ".5px", d: "m21.44,34.13c-.17,0-.31-.14-.31-.31,0-2.12-1.71-3.83-3.83-3.83s-3.83,1.71-3.83,3.83c0,.17-.14.31-.31.31s-.31-.14-.31-.31c0-2.45,1.99-4.44,4.44-4.44s4.44,1.99,4.44,4.44c0,.17-.14.31-.31.31" }), _jsx("path", { fill: "#5e35b1", stroke: "#5e35b1", strokeWidth: ".5px", d: "m32.18,30c-1.31,0-2.38-1.06-2.38-2.38s1.06-2.38,2.38-2.38,2.38,1.06,2.38,2.38h0c0,1.31-1.06,2.37-2.38,2.38m0-4.14c-.97,0-1.76.79-1.76,1.76,0,.97.79,1.76,1.76,1.76s1.76-.79,1.76-1.76h0c0-.97-.79-1.76-1.76-1.76" }), _jsx("path", { fill: "#5e35b1", stroke: "#5e35b1", strokeWidth: ".5px", d: "m36.31,34.13c-.17,0-.31-.14-.31-.31,0-2.12-1.71-3.83-3.83-3.83s-3.83,1.71-3.83,3.83c0,.17-.14.31-.31.31-.17,0-.31-.14-.31-.31h0c0-2.45,1.99-4.44,4.44-4.44s4.44,1.99,4.44,4.44c0,.17-.14.31-.31.31" }), _jsx("path", { fill: "#5e35b1", stroke: "#5e35b1", strokeWidth: ".5px", d: "m24.77,40c-8.16,0-14.77-6.61-14.77-14.77s6.61-14.77,14.77-14.77c.33,0,.67.01,1,.03.17.01.3.16.28.33s-.16.3-.33.28h0c-.32-.02-.64-.03-.96-.03-7.82,0-14.16,6.34-14.16,14.16,0,7.82,6.34,14.16,14.16,14.16,7.82,0,14.16-6.34,14.16-14.16,0-.32-.01-.64-.03-.96-.01-.17.12-.32.29-.33s.32.12.33.29c.02.33.03.67.03,1,0,8.16-6.61,14.77-14.77,14.77h0" }), _jsx("path", { d: "M22 17h-4v4h-4v-4h-4v-4h4v-4h4v4h4v4z", fill: "#1976d2" })] }) }));
+            break;
+        case DiagramItemTypes.CaseFlow_Create:
+            svgContent = (_jsx(_Fragment, { children: _jsxs("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 40 40", fill: "#e91e63", className: "item-svg", children: [_jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m37.51,36.63H12.48c-1.45,0-2.63-1.18-2.63-2.63v-10.17c0-.17.14-.31.31-.31h9.43c.17,0,.31.14.31.31,0,2.81,2.28,5.08,5.09,5.08.04,0,.07,0,.11,0,2.83.08,5.19-2.14,5.27-4.97,0-.04,0-.07,0-.11,0-.17.14-.31.31-.31h9.14c.17,0,.31.14.31.31v10.17c0,1.45-1.18,2.63-2.63,2.63m-27.04-12.49v9.86c0,1.1.9,2,2,2h25.03c1.1,0,2-.9,2-2v-9.86h-8.52c-.08,1.42-.69,2.76-1.73,3.74-1.12,1.07-2.62,1.66-4.17,1.65-3.07.06-5.65-2.32-5.82-5.39h-8.81Z" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m40.14,24.61h-.63v-.71l-4.03-8.74c-.33-.71-1.04-1.16-1.82-1.16h-17.33c-.78,0-1.49.46-1.82,1.16l-4.03,8.74v.29h-.63v-.42l4.09-8.87c.43-.93,1.37-1.52,2.39-1.52h17.33c1.03,0,1.96.6,2.39,1.53l4.09,8.86v.84Z" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m35.46,23.83h-.63v-3.59H15.16v3.59h-.63v-3.9c0-.17.14-.31.31-.31h20.3c.17,0,.31.14.31.31v3.9Z" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m33.9,19.93h-.63v-2.81h-16.54v2.81h-.63v-3.12c0-.17.14-.31.31-.31h17.17c.17,0,.31.14.31.31h0s0,3.12,0,3.12Z" }), _jsx("path", { d: "M22 17h-4v4h-4v-4h-4v-4h4v-4h4v4h4v4z", fill: "#1976d2" })] }) }));
+            break;
+        case DiagramItemTypes.RunApp:
+            svgContent = (_jsx(_Fragment, { children: _jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 1200 1200", fill: "#388e3c", className: "item-svg", children: _jsx("path", { fill: "#388e3c", d: "m910.143 91.119l-16.916 81.053a196.3 196.3 0 0 0-49.691 14.743l-58.229-58.825l-66.309 53.661l45.354 69.303c-10.104 13.862-18.357 29.104-24.623 45.503l-82.85-.374l-8.906 84.87l81.055 16.914c2.723 17.329 7.746 33.897 14.742 49.545l-58.824 58.376l53.66 66.31l69.303-45.43a196 196 0 0 0 45.504 24.698l-.375 82.774l84.871 8.904l16.838-81.053c17.346-2.722 34.035-7.666 49.695-14.669l58.301 58.825l66.309-53.735l-45.428-69.229a195.8 195.8 0 0 0 24.697-45.503l82.773.3l8.906-84.87l-81.053-16.765c-2.725-17.354-7.66-34.103-14.67-49.77l58.824-58.227l-53.734-66.309l-69.229 45.354c-13.869-10.111-29.17-18.428-45.578-24.697l.373-82.774zm14.068 197.131c2.668.009 5.373.09 8.084.374c43.355 4.555 74.756 43.384 70.201 86.741c-4.555 43.355-43.385 74.83-86.742 70.274c-43.355-4.555-74.83-43.384-70.275-86.739c4.269-40.647 38.724-70.789 78.732-70.65m-608.981 6.96l-11.375 112.711c-23.205 6.187-45.185 15.324-65.486 27.092l-87.714-71.696l-82.55 82.55l71.698 87.788c-11.768 20.308-20.91 42.272-27.092 65.484L0 610.44v116.751l112.71 11.376a268 268 0 0 0 27.092 65.41l-71.698 87.789l82.55 82.55l87.789-71.697a268 268 0 0 0 65.411 27.093l11.375 112.71h116.752l11.301-112.71c23.212-6.183 45.178-15.325 65.484-27.093l87.788 71.697l82.55-82.55l-71.697-87.714c11.768-20.302 20.906-42.281 27.092-65.485l112.711-11.376V610.44L634.5 599.138c-6.186-23.225-15.314-45.243-27.092-65.561l71.697-87.714l-82.55-82.549l-87.713 71.696c-20.316-11.775-42.336-20.905-65.562-27.093l-11.301-112.71H315.23zm58.376 265.61c59.649 0 107.996 48.348 107.996 107.996S433.255 776.81 373.606 776.81S265.61 728.463 265.61 668.816c0-59.648 48.348-107.996 107.996-107.996m495.673 144.219l-11.9 59.273c-12.188 1.993-23.873 5.653-34.877 10.776l-41.012-43.033l-46.553 39.292l31.883 50.667c-7.102 10.143-12.959 21.308-17.363 33.306l-58.15-.301l-6.287 62.118l56.955 12.35a147.7 147.7 0 0 0 10.328 36.298l-41.312 42.659l37.721 48.497l48.721-33.229a136 136 0 0 0 31.957 18.037l-.225 60.621l59.648 6.511l11.824-59.349c12.189-1.991 23.869-5.579 34.875-10.702l41.014 43.033l46.625-39.291l-31.957-50.668c7.104-10.139 12.959-21.312 17.363-33.306l58.229.226l6.211-62.043l-56.953-12.35c-1.914-12.695-5.402-24.911-10.328-36.372l41.311-42.585l-37.719-48.572l-48.646 33.229c-9.746-7.396-20.498-13.449-32.031-18.036l.299-60.546zm9.879 144.144c1.873.009 3.783.092 5.688.301c30.473 3.331 52.521 31.745 49.32 63.465c-3.201 31.719-30.449 54.748-60.922 51.416s-52.596-31.746-49.395-63.466c3.001-29.738 27.19-51.818 55.309-51.716" }) }) }));
+            break;
+        case DiagramItemTypes.WorkGroup_AddParts:
+            svgContent = (_jsx(_Fragment, { children: _jsxs("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 40 40", fill: "#c2185b", className: "item-svg", children: [_jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m24.77,33.07c-1.75,0-3.17-1.42-3.17-3.17,0-1.75,1.42-3.17,3.17-3.17s3.17,1.42,3.17,3.17c0,1.75-1.42,3.17-2.47,3.17m0-5.73c-1.41,0-2.56,1.15-2.56,2.56s1.15,2.56,2.56,2.56,2.56-1.15,2.56-2.56h0c0-1.41-1.15-2.56-2.56-2.56" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m30.5,38.81c-.17,0-.31-.14-.31-.31,0-3-2.43-5.43-5.43-5.43s-5.43,2.43-5.43,5.43c0,.17-.14.31-.31.31s-.31-.14-.31-.31c0-3.34,2.7-6.04,6.04-6.04s6.04,2.7,6.04,6.04c0,.17-.14.31-.31.31" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m17.3,30c-1.31,0-2.38-1.06-2.38-2.38s1.06-2.38,2.38-2.38,2.38,1.06,2.38,2.38h0c0,1.31-1.06,2.37-2.38,2.38m0-4.14c-.97,0-1.76.79-1.76,1.76s.79,1.76,1.76,1.76,1.76-.79,1.76-1.76h0c0-.97-.79-1.76-1.76-1.76" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m21.44,34.13c-.17,0-.31-.14-.31-.31,0-2.12-1.71-3.83-3.83-3.83s-3.83,1.71-3.83,3.83c0,.17-.14.31-.31.31s-.31-.14-.31-.31c0-2.45,1.99-4.44,4.44-4.44s4.44,1.99,4.44,4.44c0,.17-.14.31-.31.31" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m32.18,30c-1.31,0-2.38-1.06-2.38-2.38s1.06-2.38,2.38-2.38,2.38,1.06,2.38,2.38h0c0,1.31-1.06,2.37-2.38,2.38m0-4.14c-.97,0-1.76.79-1.76,1.76,0,.97.79,1.76,1.76,1.76s1.76-.79,1.76-1.76h0c0-.97-.79-1.76-1.76-1.76" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m36.31,34.13c-.17,0-.31-.14-.31-.31,0-2.12-1.71-3.83-3.83-3.83s-3.83,1.71-3.83,3.83c0,.17-.14.31-.31.31-.17,0-.31-.14-.31-.31h0c0-2.45,1.99-4.44,4.44-4.44s4.44,1.99,4.44,4.44c0,.17-.14.31-.31.31" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m24.77,40c-8.16,0-14.77-6.61-14.77-14.77s6.61-14.77,14.77-14.77c.33,0,.67.01,1,.03.17.01.3.16.28.33s-.16.3-.33.28h0c-.32-.02-.64-.03-.96-.03-7.82,0-14.16,6.34-14.16,14.16,0,7.82,6.34,14.16,14.16,14.16,7.82,0,14.16-6.34,14.16-14.16,0-.32-.01-.64-.03-.96-.01-.17.12-.32.29-.33s.32.12.33.29c.02.33.03.67.03,1,0,8.16-6.61,14.77-14.77,14.77h0" }), _jsx("path", { d: "M30 18l-10-10v5h-10v10h10v5l10-10z", fill: "#1976d2", transform: "rotate(45 25 18)" })] }) }));
+            break;
+        case DiagramItemTypes.CaseFlow_AddParts:
+            svgContent = (_jsx(_Fragment, { children: _jsxs("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 40 40", fill: "#e91e63", className: "item-svg", children: [_jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m37.51,36.63H12.48c-1.45,0-2.63-1.18-2.63-2.63v-10.17c0-.17.14-.31.31-.31h9.43c.17,0,.31.14.31.31,0,2.81,2.28,5.08,5.09,5.08.04,0,.07,0,.11,0,2.83.08,5.19-2.14,5.27-4.97,0-.04,0-.07,0-.11,0-.17.14-.31.31-.31h9.14c.17,0,.31.14.31.31v10.17c0,1.45-1.18,2.63-2.63,2.63m-27.04-12.49v9.86c0,1.1.9,2,2,2h25.03c1.1,0,2-.9,2-2v-9.86h-8.52c-.08,1.42-.69,2.76-1.73,3.74-1.12,1.07-2.62,1.66-4.17,1.65-3.07.06-5.65-2.32-5.82-5.39h-8.81Z" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m40.14,24.61h-.63v-.71l-4.03-8.74c-.33-.71-1.04-1.16-1.82-1.16h-17.33c-.78,0-1.49.46-1.82,1.16l-4.03,8.74v.29h-.63v-.42l4.09-8.87c.43-.93,1.37-1.52,2.39-1.52h17.33c1.03,0,1.96.6,2.39,1.53l4.09,8.86v.84Z" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m35.46,23.83h-.63v-3.59H15.16v3.59h-.63v-3.9c0-.17.14-.31.31-.31h20.3c.17,0,.31.14.31.31v3.9Z" }), _jsx("path", { fill: "#c2185b", stroke: "#c2185b", strokeWidth: ".5px", d: "m33.9,19.93h-.63v-2.81h-16.54v2.81h-.63v-3.12c0-.17.14-.31.31-.31h17.17c.17,0,.31.14.31.31h0s0,3.12,0,3.12Z" }), _jsx("path", { d: "M30 18l-10-10v5h-10v10h10v5l10-10z", fill: "#1976d2", transform: "rotate(45 25 18)" })] }) }));
+            break;
+        default:
+            svgContent = (_jsx("rect", { x: PADDING, y: PADDING, width: calculatedWidth - 2 * PADDING, height: calculatedHeight - 2 * PADDING, fill: "#e0e0e0", stroke: "#a0a0a0", strokeWidth: "2", rx: "5", ry: "5" }));
+            break;
+    }
+    if (isToolboxPreview) {
+        return (_jsx(StyledToolboxSvgContainer, { children: _jsx("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, children: svgContent }) }));
+    }
+    return _jsx(_Fragment, { children: svgContent });
+};
+export default DiagramItemSvgContent;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { QueryDescriptor } from '@topconsultnpm/sdk-ts';
+export declare enum WorkItemActorTypes {
+    None = 0,
+    UID = 1,
+    GID = 2,
+    MID = 3,
+    QID = 4,
+    FXID = 5,
+    STID = 6
+}
+export interface WorkItemActor {
+    ActorType: WorkItemActorTypes;
+    ActorID: string;
+    Or: number;
+}
+interface RecipientListProps {
+    recipients: WorkItemActor[];
+    title: string;
+    tid?: number;
+    qd?: QueryDescriptor;
+    onQDChange?: (newQd: QueryDescriptor | undefined) => void;
+    onAdd: (recipient: WorkItemActor[]) => void;
+    onRemove: (recipient: WorkItemActor) => void;
+}
+declare const RecipientList: React.FC<RecipientListProps>;
+export default RecipientList;

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

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import TMButton from '../../../base/TMButton';
+import { IconAdd, IconDelete, SDKUI_Localizator } from '../../../../helper';
+import { TMUserChooserForm, TMUserIdViewer } from '../../../choosers/TMUserChooser';
+import { TMGroupChooserForm, TMGroupIdViewer } from '../../../choosers/TMGroupChooser';
+import { TMMidViewer } from '../../../viewers/TMMidViewer';
+import { SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { useOutsideClick } from '../../../../hooks/useOutsideClick';
+import { FormModes } from '../../../../ts';
+import { TMMessageBoxManager, ButtonNames } from '../../../base/TMPopUp';
+import TMModal from '../../../base/TMModal';
+import { TMMetadataChooserForm } from '../../../choosers/TMMetadataChooser';
+import TMQueryEditor from '../../../query/TMQueryEditor';
+export var WorkItemActorTypes;
+(function (WorkItemActorTypes) {
+    WorkItemActorTypes[WorkItemActorTypes["None"] = 0] = "None";
+    WorkItemActorTypes[WorkItemActorTypes["UID"] = 1] = "UID";
+    WorkItemActorTypes[WorkItemActorTypes["GID"] = 2] = "GID";
+    WorkItemActorTypes[WorkItemActorTypes["MID"] = 3] = "MID";
+    WorkItemActorTypes[WorkItemActorTypes["QID"] = 4] = "QID";
+    WorkItemActorTypes[WorkItemActorTypes["FXID"] = 5] = "FXID";
+    WorkItemActorTypes[WorkItemActorTypes["STID"] = 6] = "STID";
+})(WorkItemActorTypes || (WorkItemActorTypes = {}));
+const RecipientsColumn = styled.div `
+  flex: 1;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  min-width: 300px;
+  position: relative;
+`;
+const HeaderContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin-bottom: 10px;
+`;
+const RecipientItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 5px;
+  border-radius: 3px;
+
+  background-color: ${props => props.$isSelected ? '#e6f7ff' : 'transparent'}; 
+  border: ${props => props.$isSelected ? '1px solid #91d5ff' : '1px solid transparent'};
+`;
+const FloatingMenu = styled.div `
+  position: absolute;
+  top: 100%; /* Si apre sotto il bottone */
+  right: 0; /* Allinea il bordo destro del menu con quello del genitore */
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  display: flex;
+  flex-direction: column; /* Disposizione verticale */
+  gap: 5px;
+  padding: 5px;
+  min-width: 150px;
+  transform: translateY(5px);
+  align-items: center; /* Centra i pulsanti orizzontalmente */
+`;
+const FloatingMenuButton = styled(TMButton) `
+  width: 100%; /* Rende i pulsanti interni larghi quanto il menu */
+`;
+const RecipientList = ({ recipients, title, tid, qd, onAdd, onRemove, onQDChange }) => {
+    const [uiState, setUiState] = useState({
+        isMenuOpen: false,
+        showUserChooser: false,
+        showGroupChooser: false,
+        showMetadataChooser: false,
+        showQdEditor: false,
+        selectedRecipientIndex: null,
+    });
+    const menuRef = useOutsideClick(() => setUiState(prevState => ({ ...prevState, isMenuOpen: false })));
+    const handleQdChosen = useCallback((newQd) => {
+        if (newQd) {
+            const recipientToAdd = {
+                ActorType: WorkItemActorTypes.QID,
+                ActorID: newQd.id ? newQd.id.toString() : '-1',
+                Or: 0,
+            };
+            onAdd([recipientToAdd]);
+            onQDChange?.(newQd);
+        }
+        setUiState(prevState => ({ ...prevState, showQdEditor: false }));
+    }, [onQDChange]);
+    const handleUserChosen = useCallback((IDs) => {
+        if (IDs && IDs.length > 0) {
+            const recipientsToAdd = IDs.map(id => ({
+                ActorType: WorkItemActorTypes.UID,
+                ActorID: id.toString(),
+                Or: 0
+            }));
+            onAdd(recipientsToAdd);
+        }
+        setUiState(prevState => ({ ...prevState, showUserChooser: false }));
+    }, []);
+    const handleGroupChosen = useCallback((IDs) => {
+        if (IDs && IDs.length > 0) {
+            const recipientsToAdd = IDs.map(id => ({
+                ActorType: WorkItemActorTypes.GID,
+                ActorID: id.toString(),
+                Or: 0
+            }));
+            onAdd(recipientsToAdd);
+        }
+        setUiState(prevState => ({ ...prevState, showGroupChooser: false }));
+    }, []);
+    const handleMetadataChosen = useCallback((IDs) => {
+        if (IDs && IDs.length > 0) {
+            const recipientsToAdd = IDs.map(item => ({
+                ActorType: WorkItemActorTypes.MID,
+                ActorID: item.mid ? item.mid.toString() : '0',
+                Or: 0
+            }));
+            onAdd(recipientsToAdd);
+        }
+        setUiState(prevState => ({ ...prevState, showMetadataChooser: false }));
+    }, []);
+    const handleAddClick = () => {
+        setUiState(prevState => ({ ...prevState, isMenuOpen: !prevState.isMenuOpen }));
+    };
+    const handleRecipientClick = useCallback((index) => {
+        setUiState(prevState => ({
+            ...prevState,
+            selectedRecipientIndex: prevState.selectedRecipientIndex === index ? null : index // Deseleziona se già selezionato, altrimenti seleziona
+        }));
+    }, []);
+    const handleKeyPress = useCallback((event) => {
+        if (event.key === 'Delete' && uiState.selectedRecipientIndex !== null) {
+            const recipientToRemove = recipients[uiState.selectedRecipientIndex];
+            if (recipientToRemove) {
+                onRemove(recipientToRemove);
+                setUiState(prevState => ({ ...prevState, selectedRecipientIndex: null })); // Resetta la selezione dopo la rimozione
+            }
+        }
+    }, [uiState.selectedRecipientIndex, recipients, onRemove]);
+    const openChooser = useCallback((chooser) => {
+        setUiState(prevState => ({
+            ...prevState,
+            isAndMenuOpen: false,
+            isOrMenuOpen: false,
+            [chooser]: true,
+        }));
+    }, []);
+    const openQdEditorFromMenu = useCallback(() => {
+        const hasExistingQd = recipients.some(r => r.ActorType === WorkItemActorTypes.QID);
+        if (hasExistingQd) {
+            TMMessageBoxManager.show({
+                buttons: [ButtonNames.OK],
+                title: SDK_Globals.appModule,
+                message: SDKUI_Localizator.WorkflowOnlyOneQueryForRecipients
+            });
+            setUiState(prevState => ({ ...prevState, isAndMenuOpen: false, isOrMenuOpen: false }));
+        }
+        else {
+            openChooser('showQdEditor');
+        }
+    }, [recipients, openChooser]);
+    const renderActorViewer = (recipient) => {
+        const actorId = parseInt(recipient.ActorID, 10);
+        switch (recipient.ActorType) {
+            case WorkItemActorTypes.UID:
+                return _jsx(TMUserIdViewer, { userId: actorId, showIcon: true });
+            case WorkItemActorTypes.GID:
+                return _jsx(TMGroupIdViewer, { groupID: actorId, showIcon: true });
+            case WorkItemActorTypes.MID:
+                return _jsx(TMMidViewer, { tid_mid: { tid: tid, mid: actorId }, showIcon: true });
+            case WorkItemActorTypes.QID:
+                return (_jsx("span", { onDoubleClick: () => openChooser('showQdEditor'), style: { cursor: 'pointer' }, children: SDKUI_Localizator.WorkflowGetRecipientsFromQuery }));
+            default:
+                return _jsxs("span", { children: [WorkItemActorTypes[recipient.ActorType], ": ", recipient.ActorID] });
+        }
+    };
+    const renderFloatingMenu = () => {
+        const menuItems = [
+            { caption: SDK_Localizator.Users, onClick: () => openChooser('showUserChooser') },
+            { caption: SDK_Localizator.Groups, onClick: () => openChooser('showGroupChooser') },
+            { caption: SDK_Localizator.Metadata, onClick: () => openChooser('showMetadataChooser') },
+            { caption: SDK_Localizator.Query, onClick: openQdEditorFromMenu },
+        ];
+        return (_jsx(FloatingMenu, { ref: menuRef, children: menuItems.map((item, index) => (_jsx(FloatingMenuButton, { btnStyle: 'text', caption: item.caption, onClick: item.onClick }, index))) }));
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyPress);
+        return () => {
+            document.removeEventListener('keydown', handleKeyPress);
+        };
+    }, [handleKeyPress]);
+    return (_jsxs(RecipientsColumn, { children: [_jsxs(HeaderContainer, { children: [_jsx("p", { style: { fontWeight: 600 }, children: title }), _jsx(TMButton, { btnStyle: 'icon', caption: SDKUI_Localizator.AddRecipient, icon: _jsx(IconAdd, {}), onClick: handleAddClick }), uiState.isMenuOpen && renderFloatingMenu()] }), _jsx("div", { style: { height: '150px', overflowY: 'auto', gap: '5px', display: 'flex', flexDirection: 'column' }, children: recipients.map((recipient, index) => (_jsxs(RecipientItem, { "$isSelected": uiState.selectedRecipientIndex === index, onClick: () => handleRecipientClick(index), tabIndex: 0, children: [_jsx(IconDelete, { color: '#c00', cursor: 'pointer', onClick: (e) => {
+                                e.stopPropagation();
+                                onRemove(recipient);
+                                setUiState(prevState => ({ ...prevState, selectedRecipientIndex: null })); // Resetta la selezione
+                            } }), renderActorViewer(recipient)] }, index))) }), uiState.showUserChooser && _jsx(TMUserChooserForm, { allowMultipleSelection: true, allowSorting: true, onClose: () => setUiState(prevState => ({ ...prevState, showUserChooser: false })), onChoose: (IDs) => handleUserChosen(IDs) }), uiState.showGroupChooser && _jsx(TMGroupChooserForm, { allowMultipleSelection: true, allowSorting: true, onClose: () => setUiState(prevState => ({ ...prevState, showGroupChooser: false })), onChoose: (IDs) => handleGroupChosen(IDs) }), uiState.showMetadataChooser && tid && _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, allowSorting: true, tids: [tid], onClose: () => setUiState(prevState => ({ ...prevState, showMetadataChooser: false })), onChoose: (IDs) => handleMetadataChosen(IDs) }), uiState.showQdEditor &&
+                _jsx(TMModal, { title: SDKUI_Localizator.QueryDefine, onClose: () => setUiState(prevState => ({ ...prevState, showQdEditor: false })), children: _jsx(TMQueryEditor, { inputData: qd, formMode: FormModes.Update, onApplied: handleQdChosen, onClose: () => setUiState(prevState => ({ ...prevState, showQdEditor: false })) }) })] }));
+};
+export default RecipientList;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IWFDiagramProps {
+    xmlDiagramString: string;
+    currentSetID?: string;
+    allowEdit?: boolean;
+    onDiagramChange?: (newXmlDiagram: string) => void;
+}
+declare const WFDiagram: React.FC<IWFDiagramProps>;
+export default WFDiagram;