@topconsultnpm/sdkui-react 6.19.0-test2 → 6.20.0-dev1.10

package/lib/components/base/TMAccordion.js

@@ -47,12 +47,12 @@ const StyledGroupTemplate = styled.div `
     &::after {
         content: '';
         display: block;
-        width: 90%;
+        width: calc(100% - 35px);
         margin: 0 auto;
         border-bottom: 1px solid #00A99D;
         margin-top: 8px;
         position: absolute;
-        left: 5%;
+        left: 35px;
         bottom: 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/TMHtmlEditor.js

@@ -170,7 +170,7 @@ const TMHtmlEditor = (props) => {
                         justifyContent: 'flex-end',
                         fontSize: 12,
                         color: '#6c757d',
-                        marginTop: 4,
+                        marginTop: showInfoIcon ? 0 : 4,
                         gap: 4,
                     }, children: [`${Math.max(charactersRemaining, 0)} ${SDKUI_Localizator.CharactersRemaining}`, showInfoIcon && (_jsx(TMTooltip, { content: 'Markup HTML', children: _jsx("span", { className: "dx-icon-codeblock", style: { fontSize: 22, cursor: 'pointer' }, onClick: () => {
                                     TMMessageBoxManager.show({

package/lib/components/editors/TMMetadataValues.js

@@ -10,7 +10,7 @@ import TMTooltip from "../base/TMTooltip";
 import TMCheckBox from "./TMCheckBox";
 import TMMetadataEditor, { useMetadataEditableList } from "./TMMetadataEditor";
 import { FormulaHelper } from "./TMFormulaEditor";
-import { DraftsMIDs, DSAttachsMIDs } from "../../ts";
+import { ChronologyMIDs, DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
@@ -388,6 +388,20 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         });
         return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item, isReadOnly)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutChronology = useMemo(() => {
+        const chronologyData = [];
+        metadataValues.forEach(item => {
+            switch (item.md?.id) {
+                case ChronologyMIDs.Ver:
+                case ChronologyMIDs.AuthorID:
+                    chronologyData.push(item);
+                    break;
+                default:
+                    break;
+            }
+        });
+        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]);
     const layoutDsAttachs = useMemo(() => {
         const dsAttachsData = [];
         metadataValues.forEach(item => {
@@ -443,10 +457,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 +472,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 +505,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 +517,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 +537,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(() => {
@@ -533,7 +555,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         }
         switch (currentDTD?.id) {
             case SystemTIDs.Drafts: return layoutDraft;
-            // case SystemTIDs.Chronology: break;
+            case SystemTIDs.Chronology: return layoutChronology;
             case SystemTIDs.DSAttachs: return layoutDsAttachs;
             default:
                 // Se è presente un layout personalizzato, usalo, altrimenti usa il rendering standard

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/TMDcmtBlog.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
 import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMDcmtBlogProps {
-    blogsDatasource: HomeBlogPost[];
-    setBlogsDatasource: (posts: HomeBlogPost[]) => void;
-    hasLoadedDataOnce: boolean;
-    setHasLoadedDataOnce: (loaded: boolean) => void;
-    lastLoadedDid: number | undefined;
-    setLastLoadedDid: (did: number | undefined) => void;
     tid: number | undefined;
     did: number | undefined;
-    fetchBlogDataAsync: (tid: number | undefined, did: number | undefined) => Promise<void>;
     isVisible?: boolean;
+    fetchBlogDataTrigger?: number;
     allTasks?: Array<TaskDescriptor>;
     getAllTasks?: () => Promise<void>;
     deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;

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

@@ -6,13 +6,40 @@ import { TMNothingToShow } from './TMDcmtPreview';
 import { IconBoard, SDKUI_Localizator } from '../../../helper';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import TMBlogsPost from '../../grids/TMBlogsPost';
-const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, setHasLoadedDataOnce, lastLoadedDid, setLastLoadedDid, tid, did, fetchBlogDataAsync, isVisible, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+import TMSpinner from '../../base/TMSpinner';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+const TMDcmtBlog = ({ tid, did, isVisible, fetchBlogDataTrigger, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+    const [blogsDatasource, setBlogsDatasource] = useState([]);
+    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false); //traccia se *qualsiasi* dato è stato caricato per la prima volta
+    const [lastLoadedDid, setLastLoadedDid] = useState(undefined); // `lastLoadedDid` tiene traccia dell'ultimo `did` per cui abbiamo caricato i dati
     // State to manage show comment form selected file
     const [showCommentForm, setShowCommentForm] = useState(false);
     const [externalBlogPost, setExternalBlogPost] = useState(undefined);
+    const fetchBlogDataAsync = useCallback(async (tid, did) => {
+        try {
+            TMSpinner.show({ description: 'Caricamento - Bacheca...' });
+            const res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
+            setBlogsDatasource(res ?? []);
+            setHasLoadedDataOnce(true);
+            setLastLoadedDid(did);
+        }
+        catch (e) {
+            let err = e;
+            TMExceptionBoxManager.show({ exception: err });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, []);
     const showCommentFormCallback = useCallback(() => {
         setShowCommentForm(true);
     }, []);
+    // useEffect per triggerare il fetch dall'esterno tramite props
+    useEffect(() => {
+        if (fetchBlogDataTrigger !== undefined && fetchBlogDataTrigger > 0) {
+            fetchBlogDataAsync(tid, did);
+        }
+    }, [fetchBlogDataTrigger, fetchBlogDataAsync, tid, did]);
     useEffect(() => {
         if (!tid || !did) {
             setBlogsDatasource([]);
@@ -21,7 +48,7 @@ const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, se
         }
         // Condizione per eseguire il fetch:
         // 1. Il pannello è visibile
-        // 2. E (non abbiamo ancora caricato dati O il `did` è cambiato rispetto all'ultima volta)
+        // 2. E (non abbiamo ancora caricato dati o il `did` è cambiato rispetto all'ultima volta)
         const shouldFetch = isVisible && (!hasLoadedDataOnce || did !== lastLoadedDid);
         // Esegui la chiamata API solo se il pannello è visibile E i dati non sono già stati caricati
         // O, se vuoi ricaricare ogni volta che diventa visibile (ma è meno efficiente per "pesante")

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;