@topconsultnpm/sdkui-react 6.19.0-test2 → 6.19.0

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { DataColumnTypes, SDK_Localizator, DataListCacheService, SDK_Globals, LayoutModes } from '@topconsultnpm/sdk-ts';
-import { IconDetails, IconSearch, getDataColumnName, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery, IconWarning } from '../../helper';
+import { IconDetails, IconSearch, generateUniqueColumnKeys, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery, IconWarning } from '../../helper';
 import { StyledDivHorizontal } from '../base/Styled';
 import TMSpinner from '../base/TMSpinner';
 import TMSummary from '../editors/TMSummary';
@@ -125,8 +125,9 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
 export default TMDynDataListItemChooser;
 const cellRenderIcon = () => _jsx(IconDetails, {});
 export const TMDynDataListItemChooserForm = (props) => {
+    // Generate unique keys for all columns
+    const uniqueKeys = generateUniqueColumnKeys(props.searchResult?.dtdResult?.columns, props.searchResult?.fromTID);
     const dataColumns = props.searchResult?.dtdResult?.columns?.map((col, index) => {
-        let keyField = getDataColumnName(props.searchResult?.fromTID, col);
         const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
         const dataType = () => {
             switch (col.dataType) {
@@ -136,9 +137,9 @@ export const TMDynDataListItemChooserForm = (props) => {
                 default: return "string";
             }
         };
-        return { dataField: keyField, caption: col.caption, visible: isVisible, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" };
+        return { dataField: uniqueKeys[index], caption: col.caption, visible: isVisible, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" };
     });
-    const keyValue = props.searchResult ? getDataColumnName(props.searchResult?.fromTID, props.searchResult?.dtdResult?.columns?.[props.dynDL?.selectItemForValue ?? 0]) : '';
+    const keyValue = uniqueKeys[props.dynDL?.selectItemForValue ?? 0] ?? '';
     const getItems = async (refreshCache) => {
         if (!props.searchResult)
             return [];

package/lib/components/editors/TMMetadataValues.js

@@ -443,10 +443,10 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             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 => renderLayoutItem(child, depth, visited)) }) }, `root-${layoutItem.layoutItemID}`));
+                    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}`));
                 }
                 else {
-                    return (_jsx(React.Fragment, { children: children.map(child => renderLayoutItem(child, depth, visited)) }, `root-${layoutItem.layoutItemID}`));
+                    return (_jsx(React.Fragment, { children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth, visited) }, `child-${child.layoutItemID}`))) }, `root-${layoutItem.layoutItemID}`));
                 }
             }
             // Check if this is a LayoutGroup
@@ -458,25 +458,32 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 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 => renderLayoutItem(child, depth + 1, visited)) }) }, `group-tab-${layoutItem.layoutItemID}`));
+                    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}`));
                 }
                 if (groupIsNoBorder && groupDescriptor.orientation !== LayoutGroupOrientations.Horizontal && 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>
+                    );
+                }
                 if (groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
-                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }));
+                    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}`))) }));
                 }
                 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 => renderLayoutItem(child, depth + 1, visited))] }));
+                        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}`)))] }));
                     }
                     if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed) {
-                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }));
+                        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.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 => renderLayoutItem(child, depth + 1, visited)) }) :
+                            _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)))] })
                                 :
@@ -484,7 +491,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 }
                 // Apply indentation only to subgroups (depth > 0), not to root groups
                 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 => renderLayoutItem(child, depth + 1, visited)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+                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}`));
             }
             // Check if this is a LayoutControlItem (metadata field)
             else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
@@ -496,7 +503,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const parent = layout.items?.filter(p => p.layoutItemID === layoutItem.parentID);
                 if (parent && parent.length > 0 && parent[0].type === LayoutItemTypes.LayoutGroup && parent[0].lgd) {
                     const groupDescriptor = parent[0].lgd;
-                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group)
+                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group
+                        || groupDescriptor.borderStyle == LayoutGroupBorderStyles.NoBorder)
                         isAccordion = false;
                 }
                 // Find the metadata value for this MID
@@ -515,7 +523,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         };
         return (_jsx("div", { style: { width: '100%' }, children: (() => {
                 const visited = new Set();
-                return rootItems.map(item => renderLayoutItem(item, 0, visited));
+                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]);
     const renderForm = useMemo(() => {

package/lib/components/features/assistant/ToppyDraggableHelpCenter.js

@@ -33,7 +33,7 @@ const ToppyButton = styled.div.attrs((props) => ({
   /* Posizionamento di default quando non è draggato (x e y non sono definiti) */
   ${(props) => props.$x === undefined || props.$y === undefined
     ? `
-        bottom: ${props.$isMobile ? '0px' : '-20px'};
+        bottom: ${props.$isMobile ? (props.$isCollapsed ? '-20px' : '-50px') : '-20px'};
         ${props.$align === 'left' ? 'left: 10px;' : 'right: 10px;'};
       `
     : ''}
@@ -48,15 +48,9 @@ const ToppyButton = styled.div.attrs((props) => ({
   /* Dimensioni dinamiche in base allo stato collassato e al tipo di dispositivo
      Usa min() per adattarsi su schermi piccoli */
   width: ${(props) => {
-    if (props.$isMobile) {
-        return props.$isCollapsed ? 'min(40px, 100%)' : '80px';
-    }
     return props.$isCollapsed ? 'min(60px, 100%)' : '120px';
 }};
   height: ${(props) => {
-    if (props.$isMobile) {
-        return props.$isCollapsed ? 'min(45px, 100%)' : '95px';
-    }
     return props.$isCollapsed ? 'min(70px, 100%)' : '140px';
 }};
   max-width: 100%;
@@ -66,18 +60,8 @@ const ToppyButton = styled.div.attrs((props) => ({
 
   img {
     /* Dimensioni dell'immagine in base allo stato collassato e al tipo di dispositivo */
-    width: ${(props) => {
-    if (props.$isMobile) {
-        return props.$isCollapsed ? '40px' : '80px';
-    }
-    return props.$isCollapsed ? '60px' : '120px';
-}};
-    height: ${(props) => {
-    if (props.$isMobile) {
-        return props.$isCollapsed ? '40px' : '95px';
-    }
-    return props.$isCollapsed ? '60px' : '140px';
-}};
+    width: ${(props) => props.$isCollapsed ? (props.$isMobile ? '40px' : '60px') : (props.$isMobile ? '80px' : '120px')};
+    height: ${(props) => props.$isCollapsed ? (props.$isMobile ? '40px' : '60px') : (props.$isMobile ? '100px' : '140px')};
     pointer-events: ${(props) => (props.$isMobile ? 'auto' : 'none')};
     border-radius: 50%; /* Rende l'immagine circolare */
     /* Rotazione leggera in base all'allineamento */
@@ -169,6 +153,16 @@ const DragOverlay = styled.div `
  * contenitore e può essere collassato/espanso con un doppio click.
  */
 const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onToppyImageClick, initialIsCollapsed, isVisible = true, usePortal = false, }) => {
+    // Configurazione del layout e dei limiti di posizionamento di Toppy
+    const LAYOUT_CONFIG = {
+        bottomOffsetDesktop: 20, // Quanto Toppy può uscire dal bordo inferiore su desktop
+        bottomOffsetMobileCollapsed: 20, // Quanto Toppy può uscire dal bordo inferiore su mobile quando è collassato
+        bottomOffsetMobileExpanded: 50, // Quanto Toppy può uscire dal bordo inferiore su mobile quando è espanso
+        buttonOffset: 8, // Spazio extra per i bottoni posizionati a -8px (ExpandButton, CloseButton)
+        closeButtonOffset: 8, // Offset dei bottoni che sporgono dalla bubble (CloseButton sulla bubble)
+        bubbleBuffer: 5, // Buffer di sicurezza per evitare sovrapposizioni con la bubble
+        minTopOffset: 8 // Limite minimo dall'alto per evitare che i bottoni superiori escano
+    };
     // Ref per il contenitore principale
     const buttonRef = useRef(null);
     // Stato per controllare se il componente è collassato o espanso
@@ -205,20 +199,16 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
             return;
         const rect = buttonRef.current.getBoundingClientRect();
         // Spazio extra occupato dalla bubble quando non è collassato
-        // Include anche l'offset dei bottoni che sporgono dalla bubble (8px)
-        const closeButtonOffset = 8;
-        const extraHeight = !isCollapsed ? bubbleSize.height + closeButtonOffset : 0;
-        const extraWidth = !isCollapsed ? bubbleSize.width + closeButtonOffset : 0;
+        const extraHeight = !isCollapsed ? bubbleSize.height + LAYOUT_CONFIG.closeButtonOffset : 0;
+        const extraWidth = !isCollapsed ? bubbleSize.width + LAYOUT_CONFIG.closeButtonOffset : 0;
         let minX = 0;
         let maxX;
         let maxY;
-        const bubbleBuffer = 5;
-        const buttonOffset = 8; // Spazio extra per i bottoni posizionati a -8px
-        const minY = buttonOffset; // Limite minimo per evitare che i bottoni superiori escano
+        const minY = LAYOUT_CONFIG.minTopOffset;
         if (usePortal) {
             // Calcola i limiti usando le dimensioni del viewport
-            maxX = window.innerWidth - rect.width - buttonOffset; // Restringo per evitare che i bottoni a destra escano
-            maxY = window.innerHeight - rect.height + 20;
+            maxX = window.innerWidth - rect.width - LAYOUT_CONFIG.buttonOffset;
+            maxY = window.innerHeight - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
         }
         else {
             // Calcola i limiti usando le dimensioni del parent
@@ -226,8 +216,8 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
             if (!parent)
                 return;
             const parentRect = parent.getBoundingClientRect();
-            maxX = parentRect.width - rect.width - buttonOffset; // Restringo per evitare che i bottoni a destra escano
-            maxY = parentRect.height - rect.height + 20;
+            maxX = parentRect.width - rect.width - LAYOUT_CONFIG.buttonOffset;
+            maxY = parentRect.height - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
         }
         if (!isCollapsed) {
             if (align === 'right') {
@@ -240,12 +230,12 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
         // Verifica se la posizione corrente è fuori dai limiti
         const isOutOfBounds = position.x < minX ||
             position.x > maxX ||
-            position.y < Math.max(minY, extraHeight + bubbleBuffer) ||
+            position.y < Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer) ||
             position.y > maxY;
         // Se è fuori dai limiti, aggiusta la posizione
         if (isOutOfBounds) {
             const adjustedX = Math.max(minX, Math.min(position.x, maxX));
-            const adjustedY = Math.max(Math.max(minY, extraHeight + bubbleBuffer), Math.min(position.y, maxY));
+            const adjustedY = Math.max(Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer), Math.min(position.y, maxY));
             setPosition({ x: adjustedX, y: adjustedY });
         }
     }, [isCollapsed, bubbleSize, usePortal, align]);
@@ -259,27 +249,24 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
             if (!buttonRef.current || !position)
                 return;
             const rect = buttonRef.current.getBoundingClientRect();
-            // Include anche l'offset dei bottoni che sporgono dalla bubble (8px)
-            const closeButtonOffset = 8;
-            const extraHeight = !isCollapsed ? bubbleSize.height + closeButtonOffset : 0;
-            const extraWidth = !isCollapsed ? bubbleSize.width + closeButtonOffset : 0;
+            // Spazio extra occupato dalla bubble quando non è collassato
+            const extraHeight = !isCollapsed ? bubbleSize.height + LAYOUT_CONFIG.closeButtonOffset : 0;
+            const extraWidth = !isCollapsed ? bubbleSize.width + LAYOUT_CONFIG.closeButtonOffset : 0;
             let minX = 0;
             let maxX;
             let maxY;
-            const bubbleBuffer = 5;
-            const buttonOffset = 8; // Spazio extra per i bottoni posizionati a -8px
-            const minY = buttonOffset; // Limite minimo per evitare che i bottoni superiori escano
+            const minY = LAYOUT_CONFIG.minTopOffset;
             if (usePortal) {
-                maxX = window.innerWidth - rect.width - buttonOffset; // Restringo per evitare che i bottoni a destra escano
-                maxY = window.innerHeight - rect.height + 20;
+                maxX = window.innerWidth - rect.width - LAYOUT_CONFIG.buttonOffset;
+                maxY = window.innerHeight - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
             }
             else {
                 const parent = buttonRef.current.offsetParent;
                 if (!parent)
                     return;
                 const parentRect = parent.getBoundingClientRect();
-                maxX = parentRect.width - rect.width - buttonOffset; // Restringo per evitare che i bottoni a destra escano
-                maxY = parentRect.height - rect.height + 20;
+                maxX = parentRect.width - rect.width - LAYOUT_CONFIG.buttonOffset;
+                maxY = parentRect.height - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
             }
             if (!isCollapsed) {
                 if (align === 'right') {
@@ -291,7 +278,7 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
             }
             const isOutOfBounds = position.x < minX ||
                 position.x > maxX ||
-                position.y < Math.max(minY, extraHeight + bubbleBuffer) ||
+                position.y < Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer) ||
                 position.y > maxY;
             if (isOutOfBounds) {
                 setPosition(null);
@@ -347,6 +334,22 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
         setIsDragging(true);
         e.preventDefault();
     };
+    /**
+     * Gestisce l'inizio del trascinamento per eventi touch
+     */
+    const handleTouchStart = (e) => {
+        if (!buttonRef.current)
+            return;
+        const touch = e.touches[0];
+        const rect = buttonRef.current.getBoundingClientRect();
+        // Calcola l'offset tra il punto di touch e l'angolo superiore sinistro del componente
+        dragOffset.current = {
+            x: touch.clientX - rect.left,
+            y: touch.clientY - rect.top,
+        };
+        setIsDragging(true);
+        e.preventDefault();
+    };
     /**
      * Gestisce il movimento durante il trascinamento
      * Calcola la nuova posizione rispettando i limiti del parent o viewport
@@ -355,24 +358,23 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     const handleMouseMove = (e) => {
         if (!isDragging || !buttonRef.current)
             return;
+        // Estrae le coordinate dal tipo di evento appropriato
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
         const rect = buttonRef.current.getBoundingClientRect();
         // Spazio extra occupato dalla bubble quando non è collassato
-        // Include anche l'offset dei bottoni che sporgono dalla bubble (8px)
-        const closeButtonOffset = 8;
-        const extraHeight = !isCollapsed ? bubbleSize.height + closeButtonOffset : 0;
-        const extraWidth = !isCollapsed ? bubbleSize.width + closeButtonOffset : 0;
+        const extraHeight = !isCollapsed ? bubbleSize.height + LAYOUT_CONFIG.closeButtonOffset : 0;
+        const extraWidth = !isCollapsed ? bubbleSize.width + LAYOUT_CONFIG.closeButtonOffset : 0;
         let minX = 0;
         let maxX;
         let maxY;
         let newX;
         let newY;
-        const bubbleBuffer = 5;
-        const buttonOffset = 8; // Spazio extra per i bottoni posizionati a -8px
-        const minY = buttonOffset; // Limite minimo per evitare che i bottoni superiori escano
+        const minY = LAYOUT_CONFIG.minTopOffset;
         if (usePortal) {
             // Calcola i limiti usando il viewport
-            maxX = window.innerWidth - rect.width - buttonOffset; // Restringo per evitare che i bottoni a destra escano
-            maxY = window.innerHeight - rect.height + 20;
+            maxX = window.innerWidth - rect.width - LAYOUT_CONFIG.buttonOffset;
+            maxY = window.innerHeight - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
             if (!isCollapsed) {
                 if (align === 'right') {
                     minX = Math.max(0, extraWidth - rect.width);
@@ -381,8 +383,8 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
                     maxX = Math.min(maxX, window.innerWidth - extraWidth);
                 }
             }
-            newX = Math.max(minX, Math.min(e.clientX - dragOffset.current.x, maxX));
-            newY = Math.max(Math.max(minY, extraHeight + bubbleBuffer), Math.min(e.clientY - dragOffset.current.y, maxY));
+            newX = Math.max(minX, Math.min(clientX - dragOffset.current.x, maxX));
+            newY = Math.max(Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer), Math.min(clientY - dragOffset.current.y, maxY));
         }
         else {
             // Calcola i limiti usando il parent
@@ -390,8 +392,8 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
             if (!parent)
                 return;
             const parentRect = parent.getBoundingClientRect();
-            maxX = parentRect.width - rect.width - buttonOffset; // Restringo per evitare che i bottoni a destra escano
-            maxY = parentRect.height - rect.height + 20;
+            maxX = parentRect.width - rect.width - LAYOUT_CONFIG.buttonOffset;
+            maxY = parentRect.height - rect.height + (isMobile ? (isCollapsed ? LAYOUT_CONFIG.bottomOffsetMobileCollapsed : LAYOUT_CONFIG.bottomOffsetMobileExpanded) : LAYOUT_CONFIG.bottomOffsetDesktop);
             if (!isCollapsed) {
                 if (align === 'right') {
                     minX = Math.max(0, extraWidth - rect.width);
@@ -400,8 +402,8 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
                     maxX = Math.min(maxX, parentRect.width - extraWidth);
                 }
             }
-            newX = Math.max(minX, Math.min(e.clientX - parentRect.left - dragOffset.current.x, maxX));
-            newY = Math.max(Math.max(minY, extraHeight + bubbleBuffer), Math.min(e.clientY - parentRect.top - dragOffset.current.y, maxY));
+            newX = Math.max(minX, Math.min(clientX - parentRect.left - dragOffset.current.x, maxX));
+            newY = Math.max(Math.max(minY, extraHeight + LAYOUT_CONFIG.bubbleBuffer), Math.min(clientY - parentRect.top - dragOffset.current.y, maxY));
         }
         setPosition({ x: newX, y: newY });
     };
@@ -413,10 +415,13 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     const handleMouseUp = (e) => {
         if (isDragging) {
             setIsDragging(false);
+            // Estrae le coordinate dal tipo di evento appropriato
+            const clientX = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;
+            const clientY = 'changedTouches' in e ? e.changedTouches[0].clientY : e.clientY;
             const rect = buttonRef.current?.getBoundingClientRect();
             if (rect) {
                 // Calcola la distanza totale del movimento usando il teorema di Pitagora
-                const moveDistance = Math.hypot(e.clientX - (rect.left + dragOffset.current.x), e.clientY - (rect.top + dragOffset.current.y));
+                const moveDistance = Math.hypot(clientX - (rect.left + dragOffset.current.x), clientY - (rect.top + dragOffset.current.y));
                 // Se il movimento è stato minimo, trattalo come un click
                 if (moveDistance < 5 && onToppyImageClick) {
                     onToppyImageClick();
@@ -427,22 +432,28 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     /**
      * Effect per gestire gli event listener durante il trascinamento
      * Gli eventi sono registrati sul document per catturare il movimento
-     * anche quando il mouse esce dal componente
+     * anche quando il mouse o il touch esce dal componente
      */
     useEffect(() => {
         if (isDragging) {
+            // Eventi mouse per desktop
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
+            // Eventi touch per mobile
+            document.addEventListener('touchmove', handleMouseMove);
+            document.addEventListener('touchend', handleMouseUp);
             return () => {
                 document.removeEventListener('mousemove', handleMouseMove);
                 document.removeEventListener('mouseup', handleMouseUp);
+                document.removeEventListener('touchmove', handleMouseMove);
+                document.removeEventListener('touchend', handleMouseUp);
             };
         }
         return undefined;
     }, [isDragging]);
     // Renderizza l'overlay solo durante il drag
     const renderDragOverlay = isDragging && _jsx(DragOverlay, {});
-    const toppyContent = (_jsxs(_Fragment, { children: [renderDragOverlay, _jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$usePortal": usePortal, onMouseDown: !isMobile ? handleMouseDown : undefined, onContextMenu: (e) => e.preventDefault(), onDoubleClick: !isMobile ? toggleCollapse : undefined, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, onClose: toggleCollapse, children: content })), (content && isCollapsed) && (_jsx(ExpandButton, { onMouseDown: (e) => {
+    const toppyContent = (_jsxs(_Fragment, { children: [renderDragOverlay, _jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$usePortal": usePortal, onMouseDown: !isMobile ? handleMouseDown : undefined, onTouchStart: isMobile ? handleTouchStart : undefined, onContextMenu: (e) => e.preventDefault(), onDoubleClick: !isMobile ? toggleCollapse : undefined, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, onClose: toggleCollapse, children: content })), (content && isCollapsed) && (_jsx(ExpandButton, { onMouseDown: (e) => {
                             isExpandButtonDraggingRef.current = false;
                             expandButtonMouseDownPosRef.current = { x: e.clientX, y: e.clientY };
                         }, onMouseMove: (e) => {
@@ -464,7 +475,7 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
                             }
                             e.stopPropagation();
                             toggleCollapse(e);
-                        }, onContextMenu: (e) => e.preventDefault(), "aria-label": SDKUI_Localizator.Maximize, title: SDKUI_Localizator.Maximize, type: "button", children: _jsx(IconWindowMaximize, {}) })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false, onClick: isMobile ? toggleCollapse : undefined })] })] }));
+                        }, onContextMenu: (e) => e.preventDefault(), "aria-label": SDKUI_Localizator.Maximize, title: SDKUI_Localizator.Maximize, type: "button", children: _jsx(IconWindowMaximize, {}) })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false })] })] }));
     // Renderizza nel document.body usando un Portal se usePortal è true, altrimenti renderizza normalmente
     return usePortal ? ReactDOM.createPortal(toppyContent, document.body) : toppyContent;
 };

package/lib/components/features/documents/TMDcmtForm.d.ts

@@ -46,6 +46,7 @@ interface ITMDcmtFormProps {
         mid: number;
         value: string;
     }>;
+    openS4TViewer?: boolean;
     onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
     s4TViewerDialogComponent?: React.ReactNode;
     enableDragDropOverlay?: boolean;

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

@@ -44,7 +44,7 @@ import TMCustomButton from '../../base/TMCustomButton';
 import ToppyDraggableHelpCenter from '../assistant/ToppyDraggableHelpCenter';
 let abortControllerLocal = new AbortController();
 //#endregion
-const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, showBackButton = true, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, onTaskCreateRequest, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowButtonsRefs = false, onReferenceClick, }) => {
+const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, showBackButton = true, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, onTaskCreateRequest, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], openS4TViewer = false, onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowButtonsRefs = false, onReferenceClick, }) => {
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
     const [waitPanelTitleLocal, setWaitPanelTitleLocal] = useState('');
@@ -408,9 +408,11 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
     }, [inputMids, layoutMode, formData, formDataOrig]);
     // Memoizza solo il valore WI_SetID per evitare re-render quando altri metadata cambiano
     const workItemSetIDValue = useMemo(() => formData.find(o => o.md?.name === WorkItemMetadataNames.WI_SetID)?.value, [formData]);
+    // Valore derivato: true se formData ha elementi validi
+    const hasFormData = useMemo(() => formData.length > 0 && formData.some(md => md.mid && md.mid > 99), [formData]);
     useEffect(() => {
         const loadAllWfData = async () => {
-            if (layoutMode !== LayoutModes.Update || !DID) {
+            if (layoutMode !== LayoutModes.Update || !DID || fromDTD?.templateTID !== TemplateTIDs.WF_WIApprView) {
                 setWorkItems([]);
                 setWorkflows([]);
                 return;
@@ -460,7 +462,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 setWorkflows(validWorkflows);
             }
             catch (error) {
-                console.error("Errore durante il caricamento dei dati del workflow:", error);
+                TMExceptionBoxManager.show({ exception: error });
                 setWorkItems([]);
                 setWorkflows([]);
             }
@@ -468,9 +470,14 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 setIsWFDataLoading(false);
             }
         };
+        // Usa hasFormData invece di formDataRef.current
+        if (!hasFormData || !fromDTD?.id) {
+            // console.log("formData is empty or fromDTD not loaded, skipping loadAllWfData");
+            return;
+        }
         if (workItemSetIDValue !== undefined || workflowApproveData.length > 0)
             loadAllWfData();
-    }, [workItemSetIDValue, workflowApproveData, DID, layoutMode]);
+    }, [hasFormData, workItemSetIDValue, workflowApproveData, DID, layoutMode, fromDTD?.templateTID, fromDTD?.id]);
     const getSelectionDcmtInfo = useCallback(() => {
         let dcmts = [];
         dcmts.push({ TID: TID ?? 0, DID: DID ?? 0 });
@@ -1356,7 +1363,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                                                 isEditable: true,
                                                 value: FormulaHelper.addFormulaTag(newFormula.expression)
                                             }));
-                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, isVisible: showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
+                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, isVisible: (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && !openS4TViewer, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
                                         _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
                                         :
                                             _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {

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

@@ -176,7 +176,7 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
             TMExceptionBoxManager.show({ exception: ex });
         }
     };
-    return (_jsxs("div", { style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
+    return (_jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
                 _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',

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

@@ -314,7 +314,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
                                 { icon: _jsx(IconMenuCAArchive, { viewBox: '11 11.5 26 27', fontSize: 16, strokeWidth: 2, color: 'black' }), beginGroup: true, text: SDKUI_Localizator.PassToArchive, onClick: handlePassToArchive }
                             ], onMenuShown: () => setIsQueryPanelActive(true) })
                         : _jsx(_Fragment, {}) }), children: [_jsx(ConfirmQueryParamsDialog, {}), SQD
-                        ? _jsxs("div", { style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
+                        ? _jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: handleQdChanged })
                                     : _jsx(TMSearchQueryEditor, { qd: qd, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: handleAdvancedMenuClick }), _jsxs("div", { style: {
                                         display: 'flex',