@topconsultnpm/sdkui-react 6.20.0-dev3.13 → 6.20.0-dev3.14

package/lib/components/choosers/TMDataListItemChooser.js

@@ -31,7 +31,7 @@ const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imag
 export const TMDataListItemChooserForm = (props) => {
     const dataColumns = useMemo(() => {
         return [
-            { dataField: 'value', caption: SDKUI_Localizator.Value },
+            { dataField: 'value', caption: SDKUI_Localizator.Value, visible: false },
             { dataField: 'name', caption: SDKUI_Localizator.Description }
         ];
     }, []);

package/lib/components/editors/TMMetadataValues.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView } from "../../helper";
+import { AccessLevels, AppModules, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView, StyledTabItem, getAppModuleGradient } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -35,7 +35,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     const [selectedItem, setSelectedItem] = useState(undefined);
     const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const [inputMidsApplied, setInputMidsApplied] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
     const onChangeHandler = useCallback((newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
@@ -422,6 +421,55 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         });
         return (_jsx("div", { style: { width: '100%' }, children: chronologyData.length > 0 && chronologyData.map(item => renderMetadataItem(item, isReadOnly)) }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    // Mappa TabLayoutItemID -> conteggio errori e dettagli per mostrare il badge sul tab
+    const tabErrorCountMap = useMemo(() => {
+        const map = new Map();
+        if (!layout || !layout.items || layout.items.length === 0 || !layout.showTab) {
+            return map;
+        }
+        // Trova i tab (LayoutGroup con parentID === 0 e orientation Vertical)
+        const tabGroups = layout.items.filter(item => item.type === LayoutItemTypes.LayoutGroup &&
+            item.parentID === 0 &&
+            item.lgd?.orientation === LayoutGroupOrientations.Vertical);
+        // Funzione ricorsiva per trovare tutti i MID figli di un tab
+        const findMidsInGroup = (parentID) => {
+            const mids = [];
+            const children = layout.items?.filter(item => item.parentID === parentID) || [];
+            for (const child of children) {
+                if (child.type === LayoutItemTypes.LayoutControlItem && child.lcid?.mid) {
+                    mids.push(child.lcid.mid);
+                }
+                else if (child.type === LayoutItemTypes.LayoutGroup) {
+                    mids.push(...findMidsInGroup(child.layoutItemID));
+                }
+            }
+            return mids;
+        };
+        // Per ogni tab, conta gli errori e raccoglie i dettagli
+        for (const tabGroup of tabGroups) {
+            const tabId = tabGroup.layoutItemID;
+            if (tabId === undefined)
+                continue;
+            const midsInTab = findMidsInGroup(tabId);
+            const errorDetails = [];
+            for (const mid of midsInTab) {
+                const md = metadataValues.find(m => m.mid === mid);
+                if (md) {
+                    const validationItem = validationItems.find(v => v.PropertyName === md.md?.nameLoc);
+                    if (validationItem) {
+                        errorDetails.push({
+                            fieldName: md.md?.nameLoc ?? '',
+                            message: validationItem.Message ?? ''
+                        });
+                    }
+                }
+            }
+            if (errorDetails.length > 0) {
+                map.set(tabId, { count: errorDetails.length, details: errorDetails });
+            }
+        }
+        return map;
+    }, [layout, metadataValues, validationItems]);
     const layoutDsAttachs = useMemo(() => {
         const dsAttachsData = [];
         metadataValues.forEach(item => {
@@ -465,22 +513,56 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
             return layout.items?.filter(item => item.parentID === parentID) || [];
         };
-        // Recursive function to render layout items with depth tracking for indentation
-        // Prevent infinite recursion by tracking visited layoutItemIDs (handles malformed layouts where an item
-        // may reference itself as a child or cycles exist).
+        /**
+         * Renderizza ricorsivamente l'albero del layout partendo dalla radice e scendendo verso i figli.
+         *
+         * Tipi gestiti:
+         * - LayoutRoot: elemento radice, renderizza i figli come tab (se showTab) o come contenitore semplice
+         * - LayoutGroup: contenitori con orientamento (Vertical/Horizontal) e stili bordo (NoBorder, Group, GroupBox, Tabbed)
+         * - LayoutControlItem: campi metadata terminali, recuperati tramite MID e passati a renderMetadataItem
+         * - SeparatorItem: linee di separazione orizzontali
+         *
+         * @param layoutItem - elemento del layout da renderizzare
+         * @param depth - profondità di annidamento per calcolare l'indentazione (default 0)
+         * @param visited - Set di ID già visitati per prevenire cicli infiniti in layout malformati
+         */
         const renderLayoutItem = (layoutItem, depth = 0, visited = new Set()) => {
             const id = layoutItem.layoutItemID ?? 0;
             if (visited.has(id))
                 return null;
             visited.add(id);
+            // Helper: renderizza i children di un layout item
+            const renderChildren = (parentItem, childDepth) => {
+                const itemChildren = getChildren(parentItem.layoutItemID);
+                return itemChildren.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, childDepth, visited) }, `child-${child.layoutItemID}`)));
+            };
             // Check if this is a LayoutRoot - just render its children
             if (layoutItem.type === LayoutItemTypes.LayoutRoot) {
                 const children = getChildren(layoutItem.layoutItemID);
                 if (layout.showTab) {
-                    return (_jsx(React.Fragment, { children: _jsx(TabPanel, { width: "100%", height: "100%", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth, visited) }, `child-${child.layoutItemID}`))) }) }, `root-${layoutItem.layoutItemID}`));
+                    // Per ogni figlio che è un LayoutGroup tab, costruisce i dati per il TabPanel
+                    // Segna ogni LayoutGroup come visitato per prevenire cicli
+                    const tabItems = [];
+                    for (const child of children) {
+                        const childId = child.layoutItemID ?? 0;
+                        if (visited.has(childId))
+                            continue;
+                        visited.add(childId);
+                        const childChildren = getChildren(child.layoutItemID);
+                        const childContent = (_jsx("div", { style: { width: '100%' }, children: childChildren.map(grandChild => (_jsx(React.Fragment, { children: renderLayoutItem(grandChild, depth + 1, visited) }, `grandchild-${grandChild.layoutItemID}`))) }));
+                        const errorData = tabErrorCountMap.get(childId);
+                        tabItems.push({
+                            layoutItemID: child.layoutItemID,
+                            content: childContent,
+                            title: (child.type === LayoutItemTypes.LayoutGroup && child.lgd?.caption) || `Tab ${child.layoutItemID}`,
+                            errorCount: errorData?.count || 0,
+                            errorDetails: errorData?.details || []
+                        });
+                    }
+                    return (_jsx(React.Fragment, { children: _jsx(TMLayoutTabPanel, { tabItems: tabItems }) }, `root-${layoutItem.layoutItemID}`));
                 }
                 else {
-                    return (_jsx(React.Fragment, { children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth, visited) }, `child-${child.layoutItemID}`))) }, `root-${layoutItem.layoutItemID}`));
+                    return (_jsx(React.Fragment, { children: renderChildren(layoutItem, depth) }, `root-${layoutItem.layoutItemID}`));
                 }
             }
             // Check if this is a LayoutGroup
@@ -490,42 +572,55 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
                 const groupIsNoBorder = groupDescriptor.borderStyle == undefined || groupDescriptor.borderStyle == LayoutGroupBorderStyles.NoBorder || groupDescriptor.borderStyle == LayoutGroupBorderStyles.None;
                 const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
-                //Layout Grou da trasformare in tab
-                if (groupDescriptor.orientation == LayoutGroupOrientations.Vertical && layout.showTab && layoutItem.parentID === 0) {
-                    return (_jsx(Item, { title: groupTitle, children: _jsx("div", { style: { width: '100%' }, children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) }, `group-tab-${layoutItem.layoutItemID}`));
+                const isVertical = groupDescriptor.orientation === LayoutGroupOrientations.Vertical;
+                const isHorizontal = groupDescriptor.orientation === LayoutGroupOrientations.Horizontal;
+                const nextDepth = depth + 1;
+                // Stile comune per gruppi con bordo e titolo
+                const borderedGroupStyle = (flexDir) => ({
+                    position: 'relative',
+                    border: '2px solid #CAD9EB',
+                    borderRadius: '3px',
+                    padding: '12px 6px 6px',
+                    margin: '10px',
+                    display: 'flex',
+                    flexDirection: flexDir,
+                    flexWrap: 'wrap',
+                    gap: '3px'
+                });
+                const groupTitleElement = (_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor }, children: groupTitle }));
+                // Layout Group da trasformare in tab - il rendering è già gestito da LayoutRoot
+                if (isVertical && layout.showTab && layoutItem.parentID === 0) {
+                    return null;
                 }
-                if (groupIsNoBorder && groupDescriptor.orientation !== LayoutGroupOrientations.Horizontal && children.length == 0) {
-                    return (_jsx("br", {}));
+                // Gruppo vuoto senza bordo (non orizzontale) → line break
+                if (groupIsNoBorder && !isHorizontal && children.length === 0) {
+                    return _jsx("br", {});
                 }
-                if (!groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Horizontal && children.length > 0 && groupTitle.length > 0) {
-                    return (
-                    // <div key={`group-horizontal-${layoutItem.layoutItemID}`} style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }}>
-                    _jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))), "  "] }, `group-horizontal-${layoutItem.layoutItemID}`)
-                    // </div>
-                    );
+                // Orizzontale con bordo, children e titolo
+                if (!groupIsNoBorder && isHorizontal && children.length > 0 && groupTitle.length > 0) {
+                    return (_jsxs("div", { style: borderedGroupStyle('row'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
-                if (groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
-                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }));
+                // Verticale senza bordo
+                if (groupIsNoBorder && isVertical) {
+                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: renderChildren(layoutItem, nextDepth) }));
                 }
-                if (!groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
-                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group) {
-                        return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`)))] }));
+                // Verticale con bordo
+                if (!groupIsNoBorder && isVertical) {
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group) {
+                        return (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }));
                     }
-                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed) {
-                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }));
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed) {
+                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) }));
                     }
                 }
-                if (groupDescriptor.orientation === LayoutGroupOrientations.Horizontal) {
-                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed ?
-                            _jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) :
-                            groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group ?
-                                _jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID)))] })
-                                :
-                                    children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID))) }, `group-horizontal-${layoutItem.layoutItemID}`));
+                // Orizzontale
+                if (isHorizontal) {
+                    const renderHorizontalChildren = () => children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID)));
+                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed ? (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) })) : groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group ? (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderHorizontalChildren()] })) : (renderHorizontalChildren()) }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
-                // Apply indentation only to subgroups (depth > 0), not to root groups
+                // Fallback: gruppo con accordion e indentazione
                 const indentationPx = depth > 0 ? depth * 10 : 0;
-                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
             }
             // Check if this is a LayoutControlItem (metadata field)
             else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
@@ -559,7 +654,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const visited = new Set();
                 return rootItems.map(item => (_jsx(React.Fragment, { children: renderLayoutItem(item, 0, visited) }, `root-item-${item.layoutItemID}`)));
             })() }));
-    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig, tabErrorCountMap]);
     const renderForm = useMemo(() => {
         // Se currentDTD non è ancora stato caricato, non renderizzare nulla
         if (!currentDTD) {
@@ -611,3 +706,58 @@ const StyledSeparator = styled.hr `
     border: none;
     border-top: 1px solid #e0e0e0;
 `;
+const StyledErrorBadge = styled.span `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9px;
+    background-color: #c62828;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: bold;
+    line-height: 1;
+    margin-left: 6px;
+`;
+const TMLayoutTabPanel = React.memo(({ tabItems }) => {
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const handleSelectedIndexChange = useCallback((index) => {
+        setActiveTabIndex(index);
+    }, []);
+    return (_jsx(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: handleSelectedIndexChange, children: tabItems.map((tabItem, index) => (_jsx(Item, { title: tabItem.title, tabRender: () => (_jsxs(StyledTabItem, { "$isSelected": activeTabIndex === index, "$activeGradient": getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: [_jsx("span", { children: tabItem.title }), tabItem.errorCount !== undefined && tabItem.errorCount > 0 && (_jsx(TMTooltip, { content: _jsxs("div", { style: {
+                                minWidth: '240px',
+                                padding: '14px',
+                                borderRadius: '10px',
+                                background: '#ffffff',
+                                boxShadow: '0 6px 16px rgba(0,0,0,0.08)',
+                                border: '1px solid #e5e7eb',
+                                color: '#1f2937',
+                                fontFamily: 'sans-serif'
+                            }, children: [_jsx("div", { style: {
+                                        fontWeight: 600,
+                                        textAlign: 'center',
+                                        fontSize: '1.05em',
+                                        marginBottom: '10px',
+                                        color: '#b91c1c'
+                                    }, children: tabItem.errorCount === 1 ? "1 campo non valido" : `${tabItem.errorCount} campi non validi` }), _jsx("div", { style: {
+                                        height: '1px',
+                                        background: '#e5e7eb',
+                                        marginBottom: '10px'
+                                    } }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: tabItem.errorDetails?.map((error, idx) => (_jsxs("div", { style: {
+                                            padding: '10px',
+                                            borderRadius: '8px',
+                                            background: '#fef2f2',
+                                            border: '1px solid #fecaca'
+                                        }, children: [_jsx("div", { style: {
+                                                    fontWeight: 600,
+                                                    fontSize: '0.95em',
+                                                    marginBottom: '3px',
+                                                    color: '#991b1b'
+                                                }, children: error.fieldName }), _jsx("div", { style: {
+                                                    fontSize: '0.85em',
+                                                    color: '#7f1d1d',
+                                                    lineHeight: 1.4
+                                                }, children: error.message })] }, idx))) })] }), children: _jsx(StyledErrorBadge, { children: tabItem.errorCount > 99 ? '99+' : tabItem.errorCount }) }))] })), children: _jsx("div", { style: { width: '100%' }, children: tabItem.content }) }, `tab-${tabItem.layoutItemID}`))) }));
+});

package/lib/components/editors/TMTextArea.d.ts

@@ -13,6 +13,7 @@ interface ITMTextArea extends ITMEditorBase {
     maxLength?: number;
     resize?: boolean;
     autoCalculateRows?: boolean;
+    fillHeight?: boolean;
 }
 declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
 export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -28,7 +28,7 @@ const StyledTextAreaEditorButton = styled.div `
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true, fillHeight = false } = props;
     // Reference to the textarea DOM element
     const inputRef = useRef(null);
     // Stores the textarea is focused
@@ -36,7 +36,7 @@ const TMTextArea = (props) => {
     // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
     // Stores the calculated number of rows for the textarea
-    const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
+    const [calculatedRows, setCalculatedRows] = useState(fillHeight ? 1 : (rows ?? 1));
     //Show chooserForm formulaItems
     const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
     const deviceType = useDeviceType();
@@ -148,8 +148,8 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: fillHeight ? undefined : calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize, style: fillHeight ? { flex: 1, height: 0 } : undefined }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     setShowFormulaItemsChooser(true);
                                 }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
@@ -170,8 +170,8 @@ const TMTextArea = (props) => {
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, style: fillHeight ? { height: '100%', display: 'flex', flexDirection: 'column' } : {}, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
     };
-    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextArea() }));
+    return (_jsx("div", { style: { ...elementStyle, ...(fillHeight ? { height: '100%' } : {}) }, children: renderedLeftLabelTextArea() }));
 };
 export default TMTextArea;

package/lib/components/features/documents/TMDcmtForm.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TMDcmtPreview from './TMDcmtPreview';
-import { AccessLevels, AppModules, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataTypes, ObjectClasses, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TID_DID, UpdateEngineByID, UserListCacheService, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { AccessLevels, AppModules, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, ObjectClasses, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TID_DID, UpdateEngineByID, UserListCacheService, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
 import { WorkFlowApproveRejectPopUp, WorkFlowMoreInfoPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import { DownloadTypes, FormModes, DcmtOperationTypes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
@@ -1745,7 +1745,12 @@ export const validateMetadataList = (mvdList = []) => {
         return validationItems;
     }, []);
 };
-const isValidForValidation = (mvd) => { return mvd.mid > 99; };
+const isValidForValidation = (mvd) => {
+    // I campi Computed non vanno validati (sono calcolati automaticamente)
+    if (mvd.md?.dataDomain === MetadataDataDomains.Computed)
+        return false;
+    return mvd.mid > 99;
+};
 const validateRequiredField = (mvd, value, validationItems) => {
     if (mvd.isRequired === '1' && !value.trim()) {
         const message = SDKUI_Localizator.RequiredField;

package/lib/components/features/search/TMSignatureInfoContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { SDK_Globals } from "@topconsultnpm/sdk-ts";
-import { IconCopy, getExceptionMessage } from "../../../helper";
+import { IconCopy, getExceptionMessage, SDKUI_Localizator } from "../../../helper";
 import TMSpinner from "../../base/TMSpinner";
 const TMSignatureInfoContent = (props) => {
     const { inputDcmt } = props;
@@ -105,12 +105,16 @@ const TMSignatureInfoContent = (props) => {
                                     gap: '10px',
                                     fontSize: '13px'
                                 }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Intestatario:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info1 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Riferimento temporale:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info2 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Dettagli:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info3 ?? '-' })] })] })] }, idx)))] })) : (_jsx("div", { style: {
-                    padding: '20px',
+                    border: "1px solid #d0d0d0",
+                    borderRadius: "8px",
+                    padding: "16px",
+                    marginBottom: "12px",
+                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                    userSelect: 'text',
                     textAlign: 'center',
-                    color: '#666',
-                    background: '#f5f5f5',
-                    borderRadius: '8px'
-                }, children: "Nessuna firma trovata" })), signerInfo.shA256 && (_jsxs("div", { style: {
+                    color: '#666'
+                }, children: SDKUI_Localizator.NoSignatureFound })), signerInfo.shA256 && (_jsxs("div", { style: {
                     marginBottom: '12px',
                     padding: '16px',
                     background: '#f5f5f5',

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { SDK_Globals, UserListCacheService, WFEvents, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
+import { ResultTypes, SDK_Globals, UserListCacheService, ValidationItem, WFEvents, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
 import styled from "styled-components";
 import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo, IconSignaturePencil, isSign4TopEnabled, IconCheck, IconCloseCircle, IconStop, taskModalSizes } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
@@ -10,6 +10,7 @@ import TMModal from "../../base/TMModal";
 import { TMExceptionBoxManager } from "../../base/TMPopUp";
 import TMSpinner from "../../base/TMSpinner";
 import TMUserChooser from "../../choosers/TMUserChooser";
+import TMTextArea from "../../editors/TMTextArea";
 import ShowAlert from "../../base/TMAlert";
 import { FormModes } from "../../../ts";
 import TMTaskForm from "../tasks/TMTaskForm";
@@ -19,17 +20,6 @@ const StyledWorkFlowOperationButtonsContainer = styled.div `
     gap: 10px;
     flex-direction: column;
 `;
-const StyledTextArea = styled.textarea `
-    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;
@@ -102,7 +92,7 @@ export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = Devi
     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, { maxLength: 200, "$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
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMTextArea, { label: SDKUI_Localizator.CommentText, value: commentValue, onValueChanged: (e) => setCommentValue(e.target.value), validationItems: isReject === 1 && disable ? [new ValidationItem(ResultTypes.ERROR, 'comment', SDKUI_Localizator.RequiredField)] : [], maxLength: 200, fillHeight: true }), commentValue.length > 0 && _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 }) })] }) }));
 };
@@ -110,7 +100,7 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
     const [commentValue, setCommentValue] = useState('');
     const [selectedUserID, setSelectedUserID] = useState([]);
     const [participants, setParticipants] = useState([]);
-    const disable = commentValue.length === 0 || !selectedUserID;
+    const disable = commentValue.length === 0 || selectedUserID.length === 0;
     // Determina se siamo nel contesto CtrlWorkflow (quando abbiamo workItemDetail)
     const isCtrlWorkflowContext = !!workItemDetail;
     const reAssignWorkFlowAsync = async () => {
@@ -175,9 +165,9 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
     // Determina il conteggio degli item da mostrare nel titolo
     const itemCount = workItemDetail ? 1 : selectedItems.length;
     const titleSuffix = itemCount > 0 ? ` (${itemCount} workitem)` : '';
-    return (_jsx(TMModal, { onClose: onClose, width: '600px', height: '270px', isModal: true, title: SDKUI_Localizator.Reassign + titleSuffix, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMUserChooser, { dataSource: participants, values: selectedUserID, onValueChanged: (IDs) => {
+    return (_jsx(TMModal, { onClose: onClose, width: '600px', height: '350px', isModal: true, title: SDKUI_Localizator.Reassign + titleSuffix, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMUserChooser, { label: SDKUI_Localizator.AssignTo, dataSource: participants, validationItems: selectedUserID.length === 0 ? [new ValidationItem(ResultTypes.ERROR, 'selectedUser', SDKUI_Localizator.RequiredField)] : [], 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, { maxLength: 200, "$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 }) })] }) }));
+                            } }), _jsx(TMTextArea, { label: SDKUI_Localizator.CommentText, value: commentValue, onValueChanged: (e) => setCommentValue(e.target.value), validationItems: commentValue.length === 0 ? [new ValidationItem(ResultTypes.ERROR, 'comment', SDKUI_Localizator.RequiredField)] : [], maxLength: 200, fillHeight: true, elementStyle: { marginTop: '10px', flex: 1 } }), commentValue.length > 0 && _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 }) })] }) }));
 };
 /**
  * Modal per forzare l'approvazione di un work item
@@ -208,7 +198,7 @@ export const WorkflowForceApproveModal = ({ detail, onClose, onCompleted }) => {
     };
     const userName = detail.toUser?.name ?? detail.to;
     const title = `Forza completamento - ${userName}`;
-    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo della forzatura...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCheck, {}), caption: "Forza approvazione", width: '180px', disabled: disable, onClick: () => !disable && forceApproveAsync(), advancedColor: TMColors.success }) })] }) }));
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMTextArea, { label: "Motivazione", value: commentValue, onValueChanged: (e) => setCommentValue(e.target.value), validationItems: disable ? [new ValidationItem(ResultTypes.ERROR, 'comment', SDKUI_Localizator.RequiredField)] : [], placeHolder: "Inserisci il motivo della forzatura...", maxLength: 200, fillHeight: true }), commentValue.length > 0 && _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCheck, {}), caption: "Forza approvazione", width: '180px', disabled: disable, onClick: () => !disable && forceApproveAsync(), advancedColor: TMColors.success }) })] }) }));
 };
 /**
  * Modal per forzare il rifiuto di un work item
@@ -239,7 +229,7 @@ export const WorkflowForceRejectModal = ({ detail, onClose, onCompleted }) => {
     };
     const userName = detail.toUser?.name ?? detail.to;
     const title = `Forza rifiuto - ${userName}`;
-    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo del rifiuto...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCloseCircle, {}), caption: "Forza rifiuto", width: '150px', disabled: disable, onClick: () => !disable && forceRejectAsync(), advancedColor: TMColors.error }) })] }) }));
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMTextArea, { label: "Motivazione", value: commentValue, onValueChanged: (e) => setCommentValue(e.target.value), validationItems: disable ? [new ValidationItem(ResultTypes.ERROR, 'comment', SDKUI_Localizator.RequiredField)] : [], placeHolder: "Inserisci il motivo del rifiuto...", maxLength: 200, fillHeight: true }), commentValue.length > 0 && _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCloseCircle, {}), caption: "Forza rifiuto", width: '150px', disabled: disable, onClick: () => !disable && forceRejectAsync(), advancedColor: TMColors.error }) })] }) }));
 };
 /**
  * Modal per terminare le istanze workflow selezionate
@@ -278,7 +268,7 @@ export const WorkflowEndInstanceModal = ({ selectedInstances, onClose, onComplet
     const title = selectedInstances.length === 1
         ? `${SDKUI_Localizator.WorkflowEndInstance} (DID: ${selectedInstances[0].did})`
         : `${SDKUI_Localizator.WorkflowEndInstance} (${selectedInstances.length} istanze)`;
-    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo della terminazione...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconStop, {}), caption: SDKUI_Localizator.WorkflowEndInstance, width: '150px', disabled: disable, onClick: () => !disable && endInstancesAsync(), advancedColor: TMColors.error }) })] }) }));
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMTextArea, { label: "Motivazione", value: commentValue, onValueChanged: (e) => setCommentValue(e.target.value), validationItems: disable ? [new ValidationItem(ResultTypes.ERROR, 'comment', SDKUI_Localizator.RequiredField)] : [], placeHolder: "Inserisci il motivo della terminazione...", maxLength: 200, fillHeight: true }), commentValue.length > 0 && _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconStop, {}), caption: SDKUI_Localizator.WorkflowEndInstance, width: '150px', disabled: disable, onClick: () => !disable && endInstancesAsync(), advancedColor: TMColors.error }) })] }) }));
 };
 export const WorkFlowMoreInfoPopUp = (props) => {
     const { fromDTD, DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, onCompleted, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, triggerBlogRefresh } = props;

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

@@ -1343,9 +1343,24 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         const newStatus = connection.OutputStatus === WorkItemStatus.Completed
             ? WorkItemStatus.Rejected
             : WorkItemStatus.Completed;
+        const oppositeStatus = newStatus === WorkItemStatus.Completed
+            ? WorkItemStatus.Rejected
+            : WorkItemStatus.Completed;
+        // Se esiste un'altra connection dallo stesso source con il newStatus,
+        // la si inverte in modo che non esistano mai 2 uscite con lo stesso OutputStatus.
+        const sourceId = connection.Source.ParentDiagramItem.ID;
+        const conflictingConn = wfDiagram.Connections.find(conn => conn.ID !== connectionId &&
+            conn.Source.ParentDiagramItem.ID === sourceId &&
+            conn.OutputStatus === newStatus);
         const updatedDiagram = {
             ...wfDiagram,
-            Connections: wfDiagram.Connections.map(conn => conn.ID === connectionId ? { ...conn, OutputStatus: newStatus } : conn)
+            Connections: wfDiagram.Connections.map(conn => {
+                if (conn.ID === connectionId)
+                    return { ...conn, OutputStatus: newStatus };
+                if (conflictingConn && conn.ID === conflictingConn.ID)
+                    return { ...conn, OutputStatus: oppositeStatus };
+                return conn;
+            })
         };
         updateDiagram(updatedDiagram);
         setWfDiagram(updatedDiagram);

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

@@ -1,6 +1,6 @@
-import { PlatformObjectValidator, QueryValidatorOptions, ResultTypes, TMPropertyNames, ValidationItem, WorkItemStatus } from '@topconsultnpm/sdk-ts';
+import { PlatformObjectValidator, QueryValidatorOptions, ResultTypes, ValidationItem, WorkItemStatus } from '@topconsultnpm/sdk-ts';
 import { DiagramItemTypes, ArrowSymbol } from './interfaces'; // Assicurati che il percorso sia corretto
-import { generateUUID, SDKUI_Localizator } from '../../../../helper';
+import { generateUUID, LocalizeDiagramItemType, SDKUI_Localizator } from '../../../../helper';
 /**
  * Calculates the angle in degrees of an arrow based on two points.
  * @param prevPoint The previous point on the trajectory.
@@ -318,72 +318,73 @@ export const workflowValidator = async (wf) => {
         const vil = await wfDiagramItemValidator(item);
         vil.forEach(v => v.PropertyScopes = ['diagramItem']);
         validationItems.push(...vil);
+        const itemType = LocalizeDiagramItemType(item.Type);
         switch (item.Type) {
             case DiagramItemTypes.Start:
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.ERROR, `item-${item.ID}`, SDKUI_Localizator.WorkflowDiagramStartMustHaveOutgoing, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.ERROR, itemType, SDKUI_Localizator.WorkflowDiagramStartMustHaveOutgoing, ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length > 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.ERROR, `item-${item.ID}`, SDKUI_Localizator.WorkflowDiagramStartCannotHaveIncoming, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.ERROR, itemType, SDKUI_Localizator.WorkflowDiagramStartCannotHaveIncoming, ['diagramItem']));
                 }
                 break;
             case DiagramItemTypes.End:
             case DiagramItemTypes.Exit:
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.ERROR, `item-${item.ID}`, `L'elemento '${DiagramItemTypes[item.Type]}' deve avere almeno una connessione in ingresso.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.ERROR, itemType, SDKUI_Localizator.WorkflowDiagramElementMustHaveIncoming.replaceParams(itemType), ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length > 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.ERROR, `item-${item.ID}`, `L'elemento '${DiagramItemTypes[item.Type]}' non può avere connessioni in uscita.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.ERROR, itemType, SDKUI_Localizator.WorkflowDiagramElementCannotHaveOutgoing.replaceParams(itemType), ['diagramItem']));
                 }
                 break;
             case DiagramItemTypes.Condition:
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length !== 2) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, SDKUI_Localizator.WorkflowDiagramConditionTwoOutgoing, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramConditionTwoOutgoing.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.ERROR, `item-${item.ID}`, SDKUI_Localizator.WorkflowDiagramConditionMustHaveIncoming, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.ERROR, itemType, SDKUI_Localizator.WorkflowDiagramConditionMustHaveIncoming.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 break;
             case DiagramItemTypes.Approval:
             case DiagramItemTypes.ExecTask:
             case DiagramItemTypes.DataEntry:
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length !== 2) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, SDKUI_Localizator.WorkflowDiagramElementShouldHaveTwoOutgoing.replace('{0}', item.ItemName), ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveTwoOutgoing.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, SDKUI_Localizator.WorkflowDiagramElementShouldHaveIncoming.replace('{0}', item.ItemName), ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveIncoming.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 break;
             case DiagramItemTypes.Notification:
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' dovrebbe avere almeno una connessione in uscita.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveOutgoing.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' deve avere almeno una connessione in ingresso.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveIncoming.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 break;
             case DiagramItemTypes.UpdateDcmt:
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length !== 1) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' dovrebbe avere esattamente una connessione in uscita.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveOneOutgoing.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' deve avere almeno una connessione in ingresso.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveIncoming.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 break;
             case DiagramItemTypes.Status:
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length !== 1) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' dovrebbe avere esattamente una connessione in uscita.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveOneOutgoing.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' deve avere almeno una connessione in ingresso.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveIncoming.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 break;
             case DiagramItemTypes.RunApp:
                 if (wf.Connections.filter(c => c.Source.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' dovrebbe avere almeno una connessione in uscita.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveOutgoing.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 if (wf.Connections.filter(c => c.Sink.ParentDiagramItem.ID === item.ID).length === 0) {
-                    validationItems.push(new ValidationItem(ResultTypes.WARNING, `item-${item.ID}`, `L'elemento '${item.ItemName}' deve avere almeno una connessione in ingresso.`, ['diagramItem']));
+                    validationItems.push(new ValidationItem(ResultTypes.WARNING, itemType, SDKUI_Localizator.WorkflowDiagramElementShouldHaveIncoming.replaceParams(item.ItemName), ['diagramItem']));
                 }
                 break;
         }
@@ -480,7 +481,7 @@ export const wfDiagramItemValidator = async (d) => {
             qvo.DoOrderByValidation = false;
             await PlatformObjectValidator.QueryValidatorAsync(d.QD, vil, qvo);
             if (d.QD?.where === undefined || d.QD.where.length <= 0) {
-                vil.push(new ValidationItem(ResultTypes.ERROR, TMPropertyNames.where, "La query della condizione non contiene criteri di selezione", [DiagramItemProps.QD]));
+                vil.push(new ValidationItem(ResultTypes.ERROR, LocalizeDiagramItemType(d.Type), `La query della condizione '${d.ItemName}' non contiene criteri di selezione`, [DiagramItemProps.QD]));
             }
             break;
     }

package/lib/helper/SDKUI_Localizator.d.ts

@@ -54,6 +54,7 @@ export declare class SDKUI_Localizator {
     static get ArchiveDetailDocument(): "Detaildokument archivieren" | "Archive detail document" | "Archivar documento de detalle" | "Archiver le document détail" | "Arquivar documento de detalhe" | "Archivia documento dettaglio";
     static get ArchiveMasterDocument(): "Master-Dokument archivieren" | "Archive master document" | "Archivar documento maestro" | "Archiver le document maître" | "Arquivar documento mestre" | "Archivia documento master";
     static get Arguments(): "Themen" | "Arguments" | "Argumentos" | "Sujets" | "Tópicos" | "Argomenti";
+    static get AssignTo(): "Zuweisen an" | "Assign to" | "Asignar a" | "Assigner à" | "Atribuir a" | "Assegna a";
     static get AssignedBy(): "Zugewiesen von" | "Assigned by" | "Asignado por" | "Assigné par" | "Atribuído por" | "Assegnata da";
     static get AssignedByMe(): "Von mir zugewiesene" | "Assigned by me" | "Por mí" | "Que j'ai assignées" | "Atribuídas por mim" | "Assegnate da me";
     static get AssignedTo(): string;
@@ -430,6 +431,7 @@ export declare class SDKUI_Localizator {
     static get NoMessagesFound(): string;
     static get NoPanelSelected(): string;
     static get NoResultsFound(): string;
+    static get NoSignatureFound(): string;
     static get NoSource(): "Keine Quelle" | "No Source" | "Ninguna fuente" | "Aucune source" | "Nenhuma fonte" | "Nessun Origine";
     static get NoneSelection(): "Keine Auswahl" | "No selection" | "Ninguna selección" | "Pas de sélections" | "Nenhuma seleção" | "Nessuna selezione";
     static get NotAvailable(): string;
@@ -751,10 +753,14 @@ export declare class SDKUI_Localizator {
     static get WorkflowDiagramEndMissing(): "Il workflow deve contenere almeno un elemento di tipo 'End'." | "Workflow must contain at least one 'End' item." | "El workflow debe contener al menos un elemento de tipo 'End'." | "Le workflow doit contenir au moins un élément de type 'End'." | "O workflow deve conter pelo menos um elemento do tipo 'End'.";
     static get WorkflowDiagramStartMustHaveOutgoing(): "L'elemento 'Start' deve avere almeno una connessione in uscita." | "The 'Start' item must have at least one outgoing connection." | "El elemento 'Start' debe tener al menos una conexión de salida." | "L'élément 'Start' doit avoir au moins une connexion sortante." | "O elemento 'Start' deve ter pelo menos uma ligação de saída.";
     static get WorkflowDiagramStartCannotHaveIncoming(): "L'elemento 'Start' non può avere connessioni in ingresso." | "The 'Start' item cannot have incoming connections." | "El elemento 'Start' no puede tener conexiones de entrada." | "L'élément 'Start' ne peut pas avoir de connexions entrantes." | "O elemento 'Start' não pode ter ligações de entrada.";
-    static get WorkflowDiagramConditionTwoOutgoing(): "L'elemento 'Condition' deve avere esattamente due connessioni in uscita." | "The 'Condition' item must have exactly two outgoing connections." | "El elemento 'Condition' debe tener exactamente dos conexiones de salida." | "L'élément 'Condition' doit avoir exactement deux connexions sortantes." | "O elemento 'Condition' deve ter exactamente duas ligações de saída.";
-    static get WorkflowDiagramConditionMustHaveIncoming(): "L'elemento 'Condition' deve avere almeno una connessione in ingresso." | "The 'Condition' item must have at least one incoming connection." | "El elemento 'Condition' debe tener al menos una conexión de entrada." | "L'élément 'Condition' doit avoir au moins une connexion entrante." | "O elemento 'Condition' deve ter pelo menos uma ligação de entrada.";
-    static get WorkflowDiagramElementShouldHaveTwoOutgoing(): "L'elemento '{0}' dovrebbe avere esattamente due connessioni in uscita." | "The element '{0}' should have exactly two outgoing connections." | "El elemento '{0}' debería tener exactamente dos conexiones de salida." | "L'élément '{0}' devrait avoir exactement deux connexions sortantes." | "O elemento '{0}' deveria ter exactamente duas ligações de saída.";
-    static get WorkflowDiagramElementShouldHaveIncoming(): "L'elemento '{0}' deve avere almeno una connessione in ingresso." | "The element '{0}' must have at least one incoming connection." | "El elemento '{0}' debe tener al menos una conexión de entrada." | "L'élément '{0}' doit avoir au moins une connexion entrante." | "O elemento '{0}' deve ter pelo menos uma ligação de entrada.";
+    static get WorkflowDiagramConditionTwoOutgoing(): "L'elemento '{{0}}' deve avere esattamente due connessioni in uscita." | "The '{{0}}' item must have exactly two outgoing connections." | "El elemento '{{0}}' debe tener exactamente dos conexiones de salida." | "L'élément '{{0}}' doit avoir exactement deux connexions sortantes." | "O elemento '{{0}}' deve ter exactamente duas ligações de saída.";
+    static get WorkflowDiagramConditionMustHaveIncoming(): "L'elemento '{{0}}' deve avere almeno una connessione in ingresso." | "The '{{0}}' item must have at least one incoming connection." | "El elemento '{{0}}' debe tener al menos una conexión de entrada." | "L'élément '{{0}}' doit avoir au moins une connexion entrante." | "O elemento '{{0}}' deve ter pelo menos uma ligação de entrada.";
+    static get WorkflowDiagramElementShouldHaveTwoOutgoing(): "L'elemento '{{0}}' dovrebbe avere esattamente due connessioni in uscita." | "The element '{{0}}' should have exactly two outgoing connections." | "El elemento '{{0}}' debería tener exactamente dos conexiones de salida." | "L'élément '{{0}}' devrait avoir exactement deux connexions sortantes." | "O elemento '{{0}}' deveria ter exactamente duas ligações de saída.";
+    static get WorkflowDiagramElementShouldHaveIncoming(): "L'elemento '{{0}}' deve avere almeno una connessione in ingresso." | "El elemento '{{0}}' debe tener al menos una conexión de entrada." | "L'élément '{{0}}' doit avoir au moins une connexion entrante." | "O elemento '{{0}}' deve ter pelo menos uma ligação de entrada." | "The element '{{0}}' must have at least one incoming connection.";
+    static get WorkflowDiagramElementMustHaveIncoming(): "L'elemento '{{0}}' deve avere almeno una connessione in ingresso." | "El elemento '{{0}}' debe tener al menos una conexión de entrada." | "L'élément '{{0}}' doit avoir au moins une connexion entrante." | "O elemento '{{0}}' deve ter pelo menos uma ligação de entrada." | "The element '{{0}}' must have at least one incoming connection." | "Das Element '{{0}}' muss mindestens eine eingehende Verbindung haben.";
+    static get WorkflowDiagramElementCannotHaveOutgoing(): "Das Element '{{0}}' kann keine ausgehenden Verbindungen haben." | "The element '{{0}}' cannot have outgoing connections." | "El elemento '{{0}}' no puede tener conexiones de salida." | "L'élément '{{0}}' ne peut pas avoir de connexions sortantes." | "O elemento '{{0}}' não pode ter ligações de saída." | "L'elemento '{{0}}' non può avere connessioni in uscita.";
+    static get WorkflowDiagramElementShouldHaveOutgoing(): "Das Element '{{0}}' sollte mindestens eine ausgehende Verbindung haben." | "The element '{{0}}' should have at least one outgoing connection." | "El elemento '{{0}}' debería tener al menos una conexión de salida." | "L'élément '{{0}}' devrait avoir au moins une connexion sortante." | "O elemento '{{0}}' deveria ter pelo menos uma ligação de saída." | "L'elemento '{{0}}' dovrebbe avere almeno una connessione in uscita.";
+    static get WorkflowDiagramElementShouldHaveOneOutgoing(): "Das Element '{{0}}' sollte genau eine ausgehende Verbindung haben." | "The element '{{0}}' should have exactly one outgoing connection." | "El elemento '{{0}}' debería tener exactamente una conexión de salida." | "L'élément '{{0}}' devrait avoir exactement une connexion sortante." | "O elemento '{{0}}' deveria ter exactamente uma ligação de saída." | "L'elemento '{{0}}' dovrebbe avere esattamente una connessione in uscita.";
     static get WorkflowDiagramMissingOrInvalid(): "Diagramm fehlt oder ist ungültig" | "Diagram missing or invalid" | "Diagrama no presente o no válido" | "Schéma manquant ou invalide" | "Diagrama ausente ou inválido" | "Diagramma non presente o non valido";
     static get WorkflowDiagramNotAuthorized(): "Sie sind nicht berechtigt, das Diagramm anzuzeigen" | "You are not authorized to view the diagram" | "No está autorizado para ver el diagrama" | "Vous n'êtes pas autorisé à afficher le diagramme" | "Não está autorizado a visualizar o diagrama" | "Non sei abilitato a visualizzare il diagramma";
     static get WorkflowEndInstance(): "Instanz beenden" | "End instance" | "Finalizar instancia" | "Termine l'instance" | "Pare a instância" | "Termina istanza";

package/lib/helper/SDKUI_Localizator.js

@@ -494,6 +494,16 @@ export class SDKUI_Localizator {
             default: return "Argomenti";
         }
     }
+    static get AssignTo() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Zuweisen an";
+            case CultureIDs.En_US: return "Assign to";
+            case CultureIDs.Es_ES: return "Asignar a";
+            case CultureIDs.Fr_FR: return "Assigner à";
+            case CultureIDs.Pt_PT: return "Atribuir a";
+            default: return "Assegna a";
+        }
+    }
     static get AssignedBy() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Zugewiesen von";
@@ -4258,6 +4268,16 @@ export class SDKUI_Localizator {
             default: return "Nessun risultato trovato";
         }
     }
+    static get NoSignatureFound() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Keine Unterschrift gefunden";
+            case CultureIDs.En_US: return "No signature found";
+            case CultureIDs.Es_ES: return "No se encontró ninguna firma";
+            case CultureIDs.Fr_FR: return "Aucune signature trouvée";
+            case CultureIDs.Pt_PT: return "Nenhuma assinatura encontrada";
+            default: return "Nessuna firma trovata";
+        }
+    }
     static get NoSource() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Keine Quelle";
@@ -7496,42 +7516,82 @@ export class SDKUI_Localizator {
     }
     static get WorkflowDiagramConditionTwoOutgoing() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "L'elemento 'Condition' deve avere esattamente due connessioni in uscita.";
-            case CultureIDs.En_US: return "The 'Condition' item must have exactly two outgoing connections.";
-            case CultureIDs.Es_ES: return "El elemento 'Condition' debe tener exactamente dos conexiones de salida.";
-            case CultureIDs.Fr_FR: return "L'élément 'Condition' doit avoir exactement deux connexions sortantes.";
-            case CultureIDs.Pt_PT: return "O elemento 'Condition' deve ter exactamente duas ligações de saída.";
-            default: return "L'elemento 'Condition' deve avere esattamente due connessioni in uscita.";
+            case CultureIDs.De_DE: return "L'elemento '{{0}}' deve avere esattamente due connessioni in uscita.";
+            case CultureIDs.En_US: return "The '{{0}}' item must have exactly two outgoing connections.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' debe tener exactamente dos conexiones de salida.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' doit avoir exactement deux connexions sortantes.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' deve ter exactamente duas ligações de saída.";
+            default: return "L'elemento '{{0}}' deve avere esattamente due connessioni in uscita.";
         }
     }
     static get WorkflowDiagramConditionMustHaveIncoming() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "L'elemento 'Condition' deve avere almeno una connessione in ingresso.";
-            case CultureIDs.En_US: return "The 'Condition' item must have at least one incoming connection.";
-            case CultureIDs.Es_ES: return "El elemento 'Condition' debe tener al menos una conexión de entrada.";
-            case CultureIDs.Fr_FR: return "L'élément 'Condition' doit avoir au moins une connexion entrante.";
-            case CultureIDs.Pt_PT: return "O elemento 'Condition' deve ter pelo menos uma ligação de entrada.";
-            default: return "L'elemento 'Condition' deve avere almeno una connessione in ingresso.";
+            case CultureIDs.De_DE: return "L'elemento '{{0}}' deve avere almeno una connessione in ingresso.";
+            case CultureIDs.En_US: return "The '{{0}}' item must have at least one incoming connection.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' debe tener al menos una conexión de entrada.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' doit avoir au moins une connexion entrante.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' deve ter pelo menos uma ligação de entrada.";
+            default: return "L'elemento '{{0}}' deve avere almeno una connessione in ingresso.";
         }
     }
     static get WorkflowDiagramElementShouldHaveTwoOutgoing() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "L'elemento '{0}' dovrebbe avere esattamente due connessioni in uscita.";
-            case CultureIDs.En_US: return "The element '{0}' should have exactly two outgoing connections.";
-            case CultureIDs.Es_ES: return "El elemento '{0}' debería tener exactamente dos conexiones de salida.";
-            case CultureIDs.Fr_FR: return "L'élément '{0}' devrait avoir exactement deux connexions sortantes.";
-            case CultureIDs.Pt_PT: return "O elemento '{0}' deveria ter exactamente duas ligações de saída.";
-            default: return "L'elemento '{0}' dovrebbe avere esattamente due connessioni in uscita.";
+            case CultureIDs.De_DE: return "L'elemento '{{0}}' dovrebbe avere esattamente due connessioni in uscita.";
+            case CultureIDs.En_US: return "The element '{{0}}' should have exactly two outgoing connections.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' debería tener exactamente dos conexiones de salida.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' devrait avoir exactement deux connexions sortantes.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' deveria ter exactamente duas ligações de saída.";
+            default: return "L'elemento '{{0}}' dovrebbe avere esattamente due connessioni in uscita.";
         }
     }
     static get WorkflowDiagramElementShouldHaveIncoming() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "L'elemento '{0}' deve avere almeno una connessione in ingresso.";
-            case CultureIDs.En_US: return "The element '{0}' must have at least one incoming connection.";
-            case CultureIDs.Es_ES: return "El elemento '{0}' debe tener al menos una conexión de entrada.";
-            case CultureIDs.Fr_FR: return "L'élément '{0}' doit avoir au moins une connexion entrante.";
-            case CultureIDs.Pt_PT: return "O elemento '{0}' deve ter pelo menos uma ligação de entrada.";
-            default: return "L'elemento '{0}' deve avere almeno una connessione in ingresso.";
+            case CultureIDs.De_DE: return "L'elemento '{{0}}' deve avere almeno una connessione in ingresso.";
+            case CultureIDs.En_US: return "The element '{{0}}' must have at least one incoming connection.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' debe tener al menos una conexión de entrada.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' doit avoir au moins une connexion entrante.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' deve ter pelo menos uma ligação de entrada.";
+            default: return "L'elemento '{{0}}' deve avere almeno una connessione in ingresso.";
+        }
+    }
+    static get WorkflowDiagramElementMustHaveIncoming() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Das Element '{{0}}' muss mindestens eine eingehende Verbindung haben.";
+            case CultureIDs.En_US: return "The element '{{0}}' must have at least one incoming connection.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' debe tener al menos una conexión de entrada.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' doit avoir au moins une connexion entrante.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' deve ter pelo menos uma ligação de entrada.";
+            default: return "L'elemento '{{0}}' deve avere almeno una connessione in ingresso.";
+        }
+    }
+    static get WorkflowDiagramElementCannotHaveOutgoing() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Das Element '{{0}}' kann keine ausgehenden Verbindungen haben.";
+            case CultureIDs.En_US: return "The element '{{0}}' cannot have outgoing connections.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' no puede tener conexiones de salida.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' ne peut pas avoir de connexions sortantes.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' não pode ter ligações de saída.";
+            default: return "L'elemento '{{0}}' non può avere connessioni in uscita.";
+        }
+    }
+    static get WorkflowDiagramElementShouldHaveOutgoing() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Das Element '{{0}}' sollte mindestens eine ausgehende Verbindung haben.";
+            case CultureIDs.En_US: return "The element '{{0}}' should have at least one outgoing connection.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' debería tener al menos una conexión de salida.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' devrait avoir au moins une connexion sortante.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' deveria ter pelo menos uma ligação de saída.";
+            default: return "L'elemento '{{0}}' dovrebbe avere almeno una connessione in uscita.";
+        }
+    }
+    static get WorkflowDiagramElementShouldHaveOneOutgoing() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Das Element '{{0}}' sollte genau eine ausgehende Verbindung haben.";
+            case CultureIDs.En_US: return "The element '{{0}}' should have exactly one outgoing connection.";
+            case CultureIDs.Es_ES: return "El elemento '{{0}}' debería tener exactamente una conexión de salida.";
+            case CultureIDs.Fr_FR: return "L'élément '{{0}}' devrait avoir exactement une connexion sortante.";
+            case CultureIDs.Pt_PT: return "O elemento '{{0}}' deveria ter exactamente uma ligação de saída.";
+            default: return "L'elemento '{{0}}' dovrebbe avere esattamente una connessione in uscita.";
         }
     }
     static get WorkflowDiagramMissingOrInvalid() {

package/lib/helper/TMUtils.d.ts

@@ -21,6 +21,7 @@ export declare const isPdfEditorEnabled: (widgetsString: string) => boolean;
 export declare const isPdfEditorAvailable: (fromDTD: DcmtTypeDescriptor | undefined, ext: string | undefined) => boolean;
 interface TabItemProps {
     $isSelected: boolean;
+    $activeGradient?: string;
 }
 export declare const StyledTabItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TabItemProps>> & string;
 export declare const StyledTabIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TabItemProps>> & string;

package/lib/helper/TMUtils.js

@@ -194,8 +194,9 @@ export const StyledTabItem = styled.div `
   border-radius: 8px;
   font-weight: ${({ $isSelected }) => ($isSelected ? 'bold' : 'normal')};
   color: ${({ $isSelected }) => ($isSelected ? '#fff' : '#000')};
-  background: ${({ $isSelected }) => $isSelected
-    ? 'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)'
+  background: ${({ $isSelected, $activeGradient }) => $isSelected
+    ? ($activeGradient ??
+        'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)')
     : 'transparent'};
   transition: background-color 0.2s ease;
   font-size: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.20.0-dev3.13",
+    "version": "6.20.0-dev3.14",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",