@topconsultnpm/sdkui-react 6.19.0-dev2.41 → 6.19.0-dev2.43

package/lib/components/base/TMCustomButton.d.ts

@@ -7,5 +7,5 @@ type TMCustomButtonProps = {
     selectedItems?: Array<any>;
     onClose?: () => void;
 };
-declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react/jsx-runtime").JSX.Element;
 export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { TMLayoutWaitingContainer } from '../..';
-import { processButtonAttributes } from '../../helper/dcmtsHelper';
+import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -18,16 +18,14 @@ const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
     const iframeRef = useRef(null);
-    const attributes = useMemo(() => processButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
-    const selectedItemsProcessed = []; //da eliminare
-    //const selectedItemsProcessed = useMemo(() => processSelectedItems(args, formData, selectedItems), [args, formData, selectedItems]);
+    const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
     const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const selectedItemsCount = selectedItems?.length || 1;
+    const selectedItemsCount = selectedItems?.length || 0;
     // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(true);
-    const [waitPanelText, setWaitPanelText] = useState("Esecuzione azione 1/" + selectedItemsCount.toString());
+    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
     const [waitPanelValue, setWaitPanelValue] = useState(0);
     const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
     const [abortController, setAbortController] = useState(undefined);
@@ -48,20 +46,21 @@ const TMCustomButton = (props) => {
         setError(true);
     };
     const executeSequentially = async (controller) => {
-        if (!selectedItemsProcessed)
+        if (!selectedItems)
             return;
-        const processedItems = selectedItemsProcessed.length === 0 ? [...selectedItemsProcessed, attributes] : selectedItemsProcessed;
-        for (const [index, item] of processedItems.entries()) {
+        for (const [index, item] of selectedItems.entries()) {
             if (controller.signal.aborted)
                 break;
-            setWaitPanelText("Esecuzione azione " + (index + 1).toString() + "/" + selectedItemsCount.toString());
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
             setWaitPanelValue(index);
             // Attendi che l'iframe sia pronto e invia il messaggio
             await new Promise((resolve) => {
                 const checkIframe = setInterval(() => {
                     if (iframeRef.current?.contentWindow) {
                         clearInterval(checkIframe);
-                        iframeRef.current.contentWindow.postMessage({ "options": item }, targetOrigin);
+                        //devo convertire item in formData
+                        const processedItem = getSelectedItem(args, formData, item);
+                        postMessageIframe(processedItem);
                         // Attendi prima di passare al prossimo
                         setTimeout(() => {
                             setWaitPanelValue(index + 1);
@@ -74,12 +73,17 @@ const TMCustomButton = (props) => {
         setShowWaitPanel(false);
         onClose?.();
     };
+    const postMessageIframe = (data) => {
+        console.log("TMCustomButton - postMessageIframe - data:", data);
+        if (iframeRef.current?.contentWindow) {
+            iframeRef.current.contentWindow.postMessage({ "options": data }, targetOrigin);
+        }
+    };
     useEffect(() => {
         if (loading || error)
             return;
         //if(error) clearTimeout(timeoutIframe);
-        console.log("TMCustomButton - useEffect - loading:", loading, " error:", error, " RunOnce:", RunOnce);
-        if (!RunOnce) {
+        if (!RunOnce && selectedItemsCount > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
             controller.signal.addEventListener('abort', () => {
@@ -90,9 +94,15 @@ const TMCustomButton = (props) => {
             setWaitPanelMaxValue(selectedItemsCount);
             executeSequentially(controller);
         }
-        else if (iframeRef.current?.contentWindow) {
+        else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
-            iframeRef.current.contentWindow.postMessage({ "options": attributes }, targetOrigin);
+            postMessageIframe(attributes);
+            if (!RunOnce) {
+                //chiudo l'iframe dopo 2 secondi
+                setTimeout(() => {
+                    onClose?.();
+                }, 2000);
+            }
             //clearTimeout(timeoutIframe);
         }
     }, [loading, error, RunOnce]);
@@ -103,7 +113,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, onClose: onClose, children: iframeContent })) : !RunOnce && showWaitPanel ? (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: true, waitPanelTitle: "Operazione in corso", showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }))
-        : null;
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

package/lib/components/base/TMModal.d.ts

@@ -8,6 +8,7 @@ interface ITMModal {
     fontSize?: string;
     isModal?: boolean;
     resizable?: boolean;
+    expandable?: boolean;
     onClose?: () => void;
     hidePopup?: boolean;
     askClosingConfirm?: boolean;

package/lib/components/base/TMModal.js

@@ -4,6 +4,7 @@ import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
 import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
+import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
 const StyledModal = styled.div `
     width: ${props => props.$width};
     height: ${props => props.$height};
@@ -38,11 +39,12 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
+    const [isFullScreen, setIsFullScreen] = useState(false);
     useEffect(() => {
         setShowPopup(isModal);
     }, [isModal]);
@@ -65,6 +67,15 @@ const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClos
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: showCloseButton, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: showCloseButton, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: expandable ? [
+                {
+                    widget: 'dxButton',
+                    location: 'after',
+                    options: {
+                        icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
+                        onClick: () => setIsFullScreen(!isFullScreen)
+                    }
+                }
+            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

package/lib/components/features/assistant/ToppyDraggableHelpCenter.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DeviceType } from '../../base/TMDeviceProvider';
+/**
+ * Proprietà del componente ToppyDraggableHelpCenter
+ */
+interface ToppyDraggableHelpCenterProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    content?: React.ReactNode;
+    /** Tipo di dispositivo per adattare il comportamento */
+    deviceType?: DeviceType;
+    /** Se utilizzare un portal per il rendering (non utilizzato attualmente) */
+    usePortal?: boolean;
+    /** Allineamento iniziale del componente (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Stato iniziale collassato/espanso */
+    initialIsCollapsed?: boolean;
+    /** Callback chiamato quando si clicca sull'immagine di Toppy */
+    onToppyImageClick?: () => void;
+    /** Visibilità del componente */
+    isVisible?: boolean;
+}
+/**
+ * Componente ToppyDraggableHelpCenter
+ *
+ * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
+ * in una speech bubble. Il componente può essere trascinato all'interno del suo
+ * contenitore e può essere collassato/espanso con un doppio click.
+ */
+declare const ToppyDraggableHelpCenter: React.FC<ToppyDraggableHelpCenterProps>;
+export default ToppyDraggableHelpCenter;

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

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Toppy from '../../../assets/Toppy-generico.png';
+import { DeviceType } from '../../base/TMDeviceProvider';
+import ToppySpeechBubble from './ToppySpeechBubble';
+/**
+ * Styled component per il pulsante di Toppy
+ * Gestisce il posizionamento, le dimensioni e le animazioni
+ */
+const ToppyButton = styled.button.attrs((props) => ({
+    style: {
+        // Applica left/top come stili inline per evitare la generazione di troppe classi CSS
+        ...(props.$x !== undefined && props.$y !== undefined
+            ? {
+                left: `${props.$x}px`,
+                top: `${props.$y}px`,
+                bottom: 'auto',
+                right: 'auto',
+            }
+            : {}),
+        // Cursore applicato come stile inline
+        cursor: props.$isDragging ? 'grabbing' : 'grab',
+    },
+})) `
+  /* Visibilità controllata dalla prop */
+  display: ${(props) => (props.$isVisible ? 'flex' : 'none')};
+  position: absolute;
+
+  /* Posizionamento di default quando non è draggato (x e y non sono definiti) */
+  ${(props) => props.$x === undefined || props.$y === undefined
+    ? `
+        bottom: -20px;
+        ${props.$align === 'left' ? 'left: 10px;' : 'right: 10px;'};
+      `
+    : ''}
+
+  /* Z-index alto per assicurare che sia sempre in primo piano */
+  z-index: 2147483647;
+  background-color: transparent;
+  border: none;
+
+  /* Dimensioni dinamiche in base allo stato collassato
+     Usa min() per adattarsi su schermi piccoli */
+  width: ${(props) => (props.$isCollapsed ? 'min(60px, 100%)' : '120px')};
+  height: ${(props) => (props.$isCollapsed ? 'min(70px, 100%)' : '140px')};
+  max-width: 100%;
+  max-height: 100%;
+
+  user-select: none;
+
+  img {
+    /* Dimensioni dell'immagine in base allo stato collassato */
+    width: ${(props) => (props.$isCollapsed ? '60px' : '120px')};
+    height: ${(props) => (props.$isCollapsed ? '60px' : '140px')};
+    pointer-events: none;
+    border-radius: 50%; /* Rende l'immagine circolare */
+    /* Rotazione leggera in base all'allineamento */
+    transform: ${(props) => props.$align === 'left' ? 'rotate(20deg)' : 'rotate(-20deg)'};
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    /* Animazione di pulsazione quando è collassato per attirare l'attenzione */
+    ${(props) => props.$isCollapsed &&
+    `
+      animation: toppyPulse 1.5s infinite;
+    `}
+  }
+
+  /* Keyframes per l'animazione di pulsazione */
+  @keyframes toppyPulse {
+    0% {
+      /* Dimensione normale all'inizio */
+      transform: scale(1) rotate(${(props) => props.$align === 'left' ? '20deg' : '-20deg'});
+      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
+    }
+    50% {
+      /* Ingrandimento e glow al 50% dell'animazione */
+      transform: scale(1.1) rotate(${(props) => props.$align === 'left' ? '20deg' : '-20deg'});
+      box-shadow: 0 0 15px 5px rgba(0, 113, 188, 0.6);
+    }
+    100% {
+      /* Ritorno alla dimensione normale */
+      transform: scale(1) rotate(${(props) => props.$align === 'left' ? '20deg' : '-20deg'});
+      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
+    }
+  }
+`;
+/**
+ * Componente ToppyDraggableHelpCenter
+ *
+ * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
+ * in una speech bubble. Il componente può essere trascinato all'interno del suo
+ * contenitore e può essere collassato/espanso con un doppio click.
+ */
+const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onToppyImageClick, initialIsCollapsed, isVisible = true, }) => {
+    // Ref per il pulsante principale
+    const buttonRef = useRef(null);
+    // Stato per controllare se il componente è collassato o espanso
+    const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
+    // Stato per tracciare se il componente è in fase di trascinamento
+    const [isDragging, setIsDragging] = useState(false);
+    // Posizione corrente del componente (null = posizione di default)
+    const [position, setPosition] = useState(null);
+    // Offset del mouse rispetto all'angolo superiore sinistro del componente durante il drag
+    const dragOffset = useRef({ x: 0, y: 0 });
+    // Ref e stato per tracciare le dimensioni della speech bubble
+    const bubbleRef = useRef(null);
+    const [bubbleSize, setBubbleSize] = useState({ width: 0, height: 0 });
+    /**
+     * Effect per aggiornare le dimensioni della bubble quando cambia il contenuto
+     * o lo stato di collassamento. Necessario per calcolare correttamente i limiti
+     * di trascinamento.
+     */
+    useEffect(() => {
+        if (bubbleRef.current) {
+            const rect = bubbleRef.current.getBoundingClientRect();
+            setBubbleSize({ width: rect.width, height: rect.height });
+        }
+    }, [content, isCollapsed]);
+    /**
+     * Effect per resettare la posizione quando il parent o la finestra vengono ridimensionati.
+     * Questo previene che il componente finisca fuori dai bordi dopo un resize.
+     */
+    useEffect(() => {
+        if (!buttonRef.current)
+            return;
+        const parent = buttonRef.current.offsetParent;
+        if (!parent)
+            return;
+        // Funzione per verificare e aggiustare la posizione dopo un resize
+        const handleResize = () => {
+            if (!buttonRef.current || !position)
+                return;
+            const parentRect = parent.getBoundingClientRect();
+            const rect = buttonRef.current.getBoundingClientRect();
+            // Spazio extra occupato dalla bubble quando non è collassato
+            const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+            const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+            // Calcola i nuovi limiti
+            let minX = 0;
+            let maxX = parentRect.width - rect.width;
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, parentRect.width - extraWidth);
+                }
+            }
+            const maxY = parentRect.height - rect.height;
+            // Verifica se la posizione corrente è fuori dai limiti
+            const isOutOfBounds = position.x < minX ||
+                position.x > maxX ||
+                position.y < extraHeight ||
+                position.y > maxY;
+            // Se è fuori dai limiti, resetta alla posizione default
+            if (isOutOfBounds) {
+                setPosition(null);
+            }
+        };
+        // Observer per monitorare i cambiamenti di dimensione del parent
+        const resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(parent);
+        // Listener per il resize della finestra
+        window.addEventListener('resize', handleResize);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [position, isCollapsed, bubbleSize, align]);
+    /**
+     * Effect per impostare automaticamente lo stato collassato su dispositivi mobile
+     * se non è stato specificato un valore iniziale.
+     */
+    useEffect(() => {
+        if (initialIsCollapsed === undefined && deviceType === DeviceType.MOBILE) {
+            setIsCollapsed(true);
+        }
+    }, [deviceType, initialIsCollapsed]);
+    /**
+     * Gestisce il toggle dello stato collassato/espanso
+     * Chiamato dal doppio click sul componente
+     */
+    const toggleCollapse = (e) => {
+        e.stopPropagation();
+        setIsCollapsed(!isCollapsed);
+        onToppyImageClick?.();
+    };
+    /**
+     * Gestisce l'inizio del trascinamento
+     * Salva la posizione relativa del mouse rispetto al componente (offset)
+     * per mantenere il punto di presa durante il trascinamento
+     */
+    const handleMouseDown = (e) => {
+        if (!buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const parentRect = buttonRef.current.offsetParent?.getBoundingClientRect();
+        if (!parentRect)
+            return;
+        // Calcola l'offset tra il punto di click e l'angolo superiore sinistro del componente
+        dragOffset.current = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        };
+        setIsDragging(true);
+        e.preventDefault();
+    };
+    /**
+     * Gestisce il movimento durante il trascinamento
+     * Calcola la nuova posizione rispettando i limiti del parent container
+     * e tenendo conto delle dimensioni della speech bubble quando espansa
+     */
+    const handleMouseMove = (e) => {
+        if (!isDragging || !buttonRef.current)
+            return;
+        const parentRect = buttonRef.current.offsetParent?.getBoundingClientRect();
+        if (!parentRect)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        // Spazio extra occupato dalla bubble quando non è collassato
+        const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+        const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+        // Calcola i limiti orizzontali considerando la bubble
+        let minX = 0;
+        let maxX = parentRect.width - rect.width;
+        if (!isCollapsed) {
+            if (align === 'right') {
+                // La bubble si estende verso sinistra: aumenta il limite minimo
+                // per evitare che la bubble esca dal bordo sinistro
+                minX = Math.max(0, extraWidth - rect.width);
+            }
+            else {
+                // La bubble si estende verso destra: riduce il limite massimo
+                // per evitare che la bubble esca dal bordo destro
+                maxX = Math.min(maxX, parentRect.width - extraWidth);
+            }
+        }
+        // Calcola la nuova posizione X rispettando i limiti
+        const newX = Math.max(minX, Math.min(e.clientX - parentRect.left - dragOffset.current.x, maxX));
+        // Calcola la nuova posizione Y rispettando i limiti
+        // Il limite superiore tiene conto dell'altezza della bubble
+        const newY = Math.max(extraHeight, Math.min(e.clientY - parentRect.top - dragOffset.current.y, parentRect.height - rect.height));
+        setPosition({ x: newX, y: newY });
+    };
+    /**
+     * Gestisce il rilascio del mouse alla fine del trascinamento
+     * Se il movimento è stato minimo (< 5px), viene interpretato come un click
+     * e viene chiamato il callback onToppyImageClick
+     */
+    const handleMouseUp = (e) => {
+        if (isDragging) {
+            setIsDragging(false);
+            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));
+                // Se il movimento è stato minimo, trattalo come un click
+                if (moveDistance < 5 && onToppyImageClick) {
+                    onToppyImageClick();
+                }
+            }
+        }
+    };
+    /**
+     * 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
+     */
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return undefined;
+    }, [isDragging]);
+    return (_jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, onMouseDown: handleMouseDown, onContextMenu: (e) => e.preventDefault(), onDoubleClick: toggleCollapse, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, children: content })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false })] }));
+};
+export default ToppyDraggableHelpCenter;

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

@@ -162,7 +162,7 @@ const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right
         onToppyImageClick?.();
     };
     const isMobile = deviceType === DeviceType.MOBILE;
-    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
+    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, onContextMenu: (e) => e.preventDefault(), children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
     if (usePortal) {
         if (!portalContainer)
             return null;

package/lib/components/features/assistant/ToppySpeechBubble.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ToppySpeechBubbleProps {
+    align?: 'left' | 'right';
+    children: React.ReactNode;
+    className?: string;
+}
+declare const ToppySpeechBubble: React.ForwardRefExoticComponent<ToppySpeechBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export default ToppySpeechBubble;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+// Styled component
+const Bubble = styled.div `
+  position: absolute;
+  bottom: 145px;
+  ${({ $align }) => ($align === 'left' ? 'left: 0px;' : 'right: 0px;')}
+  width: max-content;
+  padding: 10px;
+  background: linear-gradient(180deg, rgba(0, 113, 188, 0.45) 0%,rgba(27, 20, 100, 0.65) 100%);
+  border-radius: 18px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+  font-size: 14px;
+  line-height: 1.4;
+  color: #333;
+  z-index: 10000;
+
+  &::after {
+    transform: ${({ $align }) => ($align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)')};
+    content: "";
+    position: absolute;
+    top: 100%;
+    ${({ $align }) => ($align === 'left' ? 'left: 20px;' : 'right: 15px;')}
+    border-width: 32px 32px 0 0;
+    border-style: solid;
+    border-color: #FFFFFF transparent; 
+    display: block;
+    width: 0;
+    height: 0;
+    z-index: 1;
+  }
+  
+  &::before {
+    transform: ${({ $align }) => ($align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)')};
+    content: "";
+    position: absolute;
+    top: 100%;
+    ${({ $align }) => ($align === 'left' ? 'left: 20px;' : 'right: 15px;')}
+    border-width: 32px 32px 0 0;
+    border-style: solid;
+    border-color: rgba(27, 20, 100, 0.65) transparent; 
+    display: block;
+    width: 0;
+    height: 0;
+    z-index: 2;
+  }
+`;
+// Componente con forwardRef
+const ToppySpeechBubble = forwardRef(({ align = 'right', children, className }, ref) => {
+    return (_jsx(Bubble, { ref: ref, "$align": align, className: className, children: children }));
+});
+export default ToppySpeechBubble;

package/lib/helper/SDKUI_Localizator.d.ts

@@ -67,6 +67,8 @@ export declare class SDKUI_Localizator {
     static get AutoAdjust(): "Automatische Anpassung" | "Auto Adjust" | "Ajuste automático" | "Ajustement automatique" | "Regolazione automatica";
     static get Author(): string;
     static get CustomButtons(): string;
+    static get CustomButtonAction(): string;
+    static get CustomButtonActions(): string;
     static get Back(): "Zurück" | "Back" | "Atrás" | "Dos" | "Voltar" | "Indietro";
     static get BatchUpdate(): "Mehrfachbearbeitung" | "Multiple modification" | "Modificación múltiple" | "Modifie multiple" | "Editar múltipla" | "Modifica multipla";
     static get BlogCase(): "Anschlagbrett" | "Blog board" | "Tablón" | "Tableau d'affichage" | "Bakeca" | "Bacheca";

package/lib/helper/SDKUI_Localizator.js

@@ -625,6 +625,26 @@ export class SDKUI_Localizator {
             default: return "Bottoni personalizzati";
         }
     }
+    static get CustomButtonAction() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Vorgang läuft";
+            case CultureIDs.En_US: return "Operation in progress";
+            case CultureIDs.Es_ES: return "Operación en curso";
+            case CultureIDs.Fr_FR: return "Opération en cours";
+            case CultureIDs.Pt_PT: return "Operação em curso";
+            default: return "Operazione in corso";
+        }
+    }
+    static get CustomButtonActions() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Aktion {{0}} von {{1}} wird ausgeführt";
+            case CultureIDs.En_US: return "Executing action {{0}} of {{1}}";
+            case CultureIDs.Es_ES: return "Ejecutando acción {{0}} de {{1}}";
+            case CultureIDs.Fr_FR: return "Exécution de l'action {{0}} sur {{1}}";
+            case CultureIDs.Pt_PT: return "Executando ação {{0}} de {{1}}";
+            default: return "Esecuzione azione {{0}} di {{1}}";
+        }
+    }
     static get Back() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Zurück";

package/lib/helper/dcmtsHelper.d.ts

@@ -4,4 +4,5 @@ export declare const hasDetailRelations: (mTID: number | undefined) => Promise<b
 /** Check if dcmtType (mTID) has configured Master or Many-to-Many relations */
 export declare const hasMasterRelations: (mTID: number | undefined) => Promise<boolean>;
 export declare const isXMLFileExt: (fileExt: string | undefined) => boolean;
-export declare const processButtonAttributes: (args: string | undefined, formData: MetadataValueDescriptorEx[] | undefined, selectedItems: Array<any> | undefined) => Record<string, any> | undefined;
+export declare const getButtonAttributes: (args: string | undefined, formData: MetadataValueDescriptorEx[] | undefined, selectedItems: Array<any> | undefined) => Record<string, any> | undefined;
+export declare const getSelectedItem: (args: string | undefined, formData: MetadataValueDescriptorEx[] | undefined, item: any) => Record<string, any> | undefined;

package/lib/helper/dcmtsHelper.js

@@ -24,67 +24,58 @@ export const isXMLFileExt = (fileExt) => {
     }
 };
 /*utility functions for TMCustomButton*/
-export const processButtonAttributes = (args, formData, selectedItems) => args && formData ? formDataMap(formData, args, selectedItems) : undefined;
-const processSelectedItems = (selectedItems) => selectedItems && selectedItems.map(item => item["DID"]) || [];
+export const getButtonAttributes = (args, formData, selectedItems) => args && formData ? formDataMap(formData, args, selectedItems) : undefined;
+const getSelectedItems = (selectedItems) => selectedItems && selectedItems.map(item => item["DID"]) || [];
+export const getSelectedItem = (args, formData, item) => {
+    //converto item in formData
+    const formDataConverted = [];
+    for (const key in item) {
+        const md = formData?.find(md => `${item["TID"]}_${md.mid}` === key);
+        if (md) { // aggiungo solo i metadati
+            const name = md.md?.name || "";
+            formDataConverted.push({ md: { name: name }, value: item[key] });
+        }
+    }
+    return args && formDataConverted ?
+        formDataMap(formDataConverted, args, []) : undefined;
+};
 const formDataMap = (data, args, selectedItems) => {
     const session = SDK_Globals.tmSession;
     const sessionDescr = session?.SessionDescr;
     const result = {};
-    // Regex per catturare: chiave=[{@campo} ...] o chiave={valore} o {@campo}
-    const keyValueRegex = /(\w+)=\[([^\]]+)\]|(\w+)=\{([^}]+)\}|\{@([^}]+)\}/g;
-    let match;
-    while ((match = keyValueRegex.exec(args)) !== null) {
+    // Helper per estrarre il valore di un campo
+    const getParamValue = (fieldName) => {
+        const md = data.find(md => md.md?.name === fieldName);
+        switch (fieldName) {
+            case 'SelectedDIDs': return getSelectedItems(selectedItems);
+            case 'AuthenticationMode': return sessionDescr?.authenticationMode ?? null;
+            case 'ArchiveID': return sessionDescr?.archiveID ?? null;
+            case 'CultureID': return sessionDescr?.cultureID ?? null;
+            case 'Domain': return sessionDescr?.domain ?? null;
+            case 'UserID': return sessionDescr?.userID ?? null;
+            case 'UserName': return sessionDescr?.userName ?? null;
+            case 'Session': return session ?? null;
+            default: return md?.value;
+        }
+    };
+    // Regex per catturare: chiave=[...] o chiave={...} o {@campo}
+    const keyValueRegex = /(\w+)=\[([^\]]+)\]|(\w+)=\{@?([^}]+)\}|\{@([^}]+)\}/g;
+    for (const match of args.matchAll(keyValueRegex)) {
         if (match[1]) {
-            // Formato: chiave=[{@campo} {@campo} ...]
+            // Formato: chiave=[{@campo} testo {@campo} ...]
             const key = match[1];
-            const content = match[2];
-            // Estrai tutti i {@campo} e concatenali
-            const fields = content.match(/\{@([^}]+)\}/g) || [];
-            const values = fields.map(field => {
-                const fieldName = field.slice(2, -1);
-                const md = data.find(md => md.md?.name === fieldName);
-                return md?.value ?? '';
-            }).filter(v => v);
-            result[key] = values.join(' ');
+            const content = match[2].replace(/\{@([^}]+)\}/g, (_, fieldName) => data.find(md => md.md?.name === fieldName)?.value ?? '');
+            result[key] = content;
         }
         else if (match[3]) {
-            // Formato: chiave={valore}
+            // Formato: chiave={@campo} o chiave={valore}
             const key = match[3];
             const value = match[4];
-            result[key] = value;
+            result[key] = value.startsWith('@') ? getParamValue(value.substring(1)) : value;
         }
         else if (match[5]) {
             // Formato: {@campo}
-            const fieldName = match[5];
-            const md = data.find(md => md.md?.name === fieldName);
-            switch (fieldName) {
-                case 'SelectedDIDs':
-                    result[fieldName] = processSelectedItems(selectedItems);
-                    break;
-                case 'AuthenticationMode':
-                    result[fieldName] = sessionDescr?.authenticationMode ?? null;
-                    break;
-                case 'ArchiveID':
-                    result[fieldName] = sessionDescr?.archiveID ?? null;
-                    break;
-                case 'CultureID':
-                    result[fieldName] = sessionDescr?.cultureID ?? null;
-                    break;
-                case 'Domain':
-                    result[fieldName] = sessionDescr?.domain ?? null;
-                    break;
-                case 'UserID':
-                    result[fieldName] = sessionDescr?.userID ?? null;
-                    break;
-                case 'UserName':
-                    result[fieldName] = sessionDescr?.userName ?? null;
-                    break;
-                case 'Session':
-                    result[fieldName] = session ?? null;
-                    break;
-                default:
-                    result[fieldName] = md?.value;
-            }
+            result[match[5]] = getParamValue(match[5]);
         }
     }
     return result;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev2.41",
+    "version": "6.19.0-dev2.43",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",