@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-dev3.3

package/lib/components/base/TMPanel.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import styled from 'styled-components';
-import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
+import styled, { css, keyframes } from 'styled-components';
+import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconRefresh, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
-import { Gutters } from '../../utils/theme';
+import { LoadIndicator } from 'devextreme-react/load-indicator';
+import { TMExceptionBoxManager } from './TMPopUp';
+import { Gutters, TMColors } from '../../utils/theme';
 const StyledBackButton = styled.button `
     display: flex;
     align-items: center;
@@ -96,6 +98,110 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
+// Allineata al TABLET_BREAKPOINT (768) di TMDeviceProvider
+const MOBILE_MEDIA_QUERY = '(max-width: 767.98px)';
+// L'eccedenza da scorrere è "larghezza viewport - larghezza testo", ma nessuna delle due
+// è nota al CSS. La si ottiene componendo due percentuali che si risolvono su box diversi:
+// la track (larga quanto il viewport) va a +100% della PROPRIA larghezza, il testo a -100%
+// della SUA. Le due animazioni hanno stessa durata ed easing, quindi lo scostamento netto
+// in ogni istante è esattamente e(t) * (viewport - testo).
+const panelTitleTrackMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(100%); }
+    85%, 100% { transform: translateX(0); }
+`;
+const panelTitleTextMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(-100%); }
+    85%, 100% { transform: translateX(0); }
+`;
+// Ritaglia il testo in eccesso: è l'unico box con overflow hidden, la track ci scorre dentro
+const StyledPanelTitleViewport = styled.div `
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 8px;
+`;
+// Larga quanto il viewport: è il metro con cui il -100% del testo viene compensato.
+const StyledPanelTitleTrack = styled.div `
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            animation: ${panelTitleTrackMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+        }
+    `}
+`;
+// Senza $marquee resta il troncamento con i puntini di sempre
+const StyledPanelTitle = styled.div `
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            flex: 0 0 auto;
+            width: max-content;
+            min-width: 100%;
+            max-width: none;
+            overflow: visible;
+            text-overflow: clip;
+            animation: ${panelTitleTextMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+                width: auto;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    `}
+`;
+const refreshSpin = keyframes `
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+`;
+// Fa girare l'icona per tutta la durata del ricaricamento
+const StyledRefreshIcon = styled.span `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${({ $isSpinning }) => $isSpinning && css `
+        animation: ${refreshSpin} 1s linear infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
+    `}
+`;
+// Copre il solo contenuto del pannello (StyledPanelContent è position: relative con overflow hidden)
+const StyledPanelLoaderOverlay = styled.div `
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.65);
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    color: ${TMColors.primaryColor};
+`;
 /**
  * TMPanel - Pannello con supporto Controlled/Uncontrolled
  *
@@ -103,9 +209,27 @@ const StyledPanelContent = styled.div `
  *   - Se NON passata → Uncontrolled: gestione interna dello stato attivo (plug-and-play)
  *   - Se passata → Controlled: il parent gestisce lo stato tramite onActivate
  */
-const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
-onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
+const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, enableTitleMarquee = false, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
+onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Back, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
     const [isMaximized, setIsMaximized] = useState(false);
+    const [isRefreshingInternal, setIsRefreshingInternal] = useState(false);
+    // Il loader compare sia per il refresh dalla testata sia per i caricamenti segnalati dal contenuto
+    const isBusy = isRefreshing || isRefreshingInternal;
+    const handleRefresh = useCallback(async () => {
+        if (isRefreshingInternal)
+            return;
+        setIsRefreshingInternal(true);
+        // Il finally garantisce che loader e rotellina si fermino anche se il ricaricamento fallisce
+        try {
+            await onRefresh?.();
+        }
+        catch (ex) {
+            TMExceptionBoxManager.show({ exception: ex });
+        }
+        finally {
+            setIsRefreshingInternal(false);
+        }
+    }, [isRefreshingInternal, onRefresh]);
     // Detect device type (e.g., mobile or desktop)
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
@@ -157,6 +281,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
             handleFocusUncontrolled();
         }
     };
+    const titleMarqueeKey = enableTitleMarquee && (typeof title === 'string' || typeof title === 'number') ? String(title) : undefined;
     // handler for external maximize management
     const handleMaximize = () => {
         setIsMaximized(prevState => {
@@ -167,15 +292,15 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
             return newValue;
         });
     };
-    return (_jsxs(StyledPanelContainer, { ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
+    return (_jsxs(StyledPanelContainer, { ref: panelRef, $isMaximized: onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
         }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, onContextMenu: (e) => e.preventDefault(), children: [showHeader &&
-                _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": currentIsActive, onDoubleClick: () => {
+                _jsx(StyledPanelHeader, { $backgroundColor: backgroundColor, $color: color, $isActive: currentIsActive, onDoubleClick: () => {
                         if (onHeaderDoubleClick)
                             onHeaderDoubleClick();
                         else
                             allowMaximize && handleMaximize();
-                    }, "$activeGradient": getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: _jsxs("div", { style: {
+                    }, $activeGradient: getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -188,31 +313,19 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     flexShrink: 0
-                                }, children: _jsxs(StyledBackButton, { "$isActive": currentIsActive, onClick: () => onBack ? onBack() : null, title: SDKUI_Localizator.Back, children: [_jsx(IconArrowLeft, {}), !isMobile && _jsx("span", { children: SDKUI_Localizator.Back })] }) }), _jsx("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'flex-start',
-                                    minWidth: 0,
-                                    overflow: 'hidden',
-                                    padding: '0 8px'
-                                }, children: _jsxs("div", { style: {
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        margin: 0
-                                    }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
-                                            ? ` (${displayedItemsCount} / ${totalItems})`
-                                            : isPositiveNumber(totalItems)
-                                                ? ` (${totalItems})`
-                                                : ''] }) }), _jsxs("div", { style: {
+                                }, children: _jsxs(StyledBackButton, { $isActive: currentIsActive, onClick: () => onBack ? onBack() : null, title: backCaption, children: [_jsx(IconArrowLeft, {}), !isMobile && _jsx("span", { children: backCaption })] }) }), _jsx(StyledPanelTitleViewport, { children: _jsx(StyledPanelTitleTrack, { $marquee: enableTitleMarquee, children: _jsxs(StyledPanelTitle, { $marquee: enableTitleMarquee, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
+                                                ? ` (${displayedItemsCount} / ${totalItems})`
+                                                : isPositiveNumber(totalItems)
+                                                    ? ` (${totalItems})`
+                                                    : ''] }) }, titleMarqueeKey) }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: '5px',
                                     flexShrink: 0
-                                }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
+                                }, children: [toolbar, onRefresh && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Refresh, disabled: isBusy, icon: _jsx(StyledRefreshIcon, { $isSpinning: isBusy, children: _jsx(IconRefresh, {}) }), btnStyle: 'icon', onClick: handleRefresh }), allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
-                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: children })] }));
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { $height: showHeader ? "calc(100% - 40px)" : "100%", $padding: padding, $backgroundColor: backgroundColorContainer ?? `#FFFFFF`, children: [children, isBusy &&
+                        _jsxs(StyledPanelLoaderOverlay, { children: [_jsx(LoadIndicator, { height: 40, width: 40 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })] })] }));
 });
 export default TMPanel;

package/lib/components/base/TMPopUp.js

@@ -60,6 +60,9 @@ export const sanitizeException = (exception) => {
     catch {
         return exception;
     }
+    if (plain && typeof plain === 'object' && !Array.isArray(plain) && plain.message === undefined && typeof exception.message === 'string') {
+        plain.message = exception.message;
+    }
     return redactSensitiveValue(plain);
 };
 const StyledExeptionToolbar = styled.div `
@@ -209,7 +212,7 @@ const ResponsiveButton = (props) => {
     return _jsx(TMButton, { fontSize: customFontSize || 'clamp(12px, 2vw, 1.1rem)', padding: "clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px)", width: "clamp(30px, 10vw, 60px)", ...otherProps });
 };
 const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy }) => {
-    return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [showToppy && _jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
+    return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { $isMobile: isMobile, children: [showToppy && _jsx(ResponsiveToppyImage, { $isMobile: isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { $isMobile: isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
 };
 const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons, onClose, confirmOnEnter = false, showToppy = true, initialWidth = 'clamp(100px, 90vw, 400px)', initialHeight = 'auto' }) => {
     let deviceType = useDeviceType();
@@ -371,7 +374,7 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
     const ExceptionToolbar = () => {
         return (_jsxs(StyledExeptionToolbar, { children: [_jsx(TMButton, { color: 'primaryOutline', btnStyle: 'text', onClick: () => copyToClipBoard(getFullMessage()), caption: SDKUI_Localizator.CopyToClipboard, showTooltip: false }), _jsx(TMButton, { btnStyle: 'text', onClick: () => { onClose?.(); setIsVisible(false); }, caption: SDKUI_Localizator.Close, showTooltip: false, color: 'error' })] }));
     };
-    return (_jsx(Popup, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
+    return (_jsx(Popup, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { $color: TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { $color: TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { $color: TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
 };
 class TMExceptionBoxManager {
     static show({ title, exception, onClose }) {

package/lib/components/base/TMResizableMenu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
 import styled from 'styled-components';
 import { createPortal } from 'react-dom';
@@ -55,7 +55,7 @@ export const TMResizableMenu = forwardRef(({ isVisible, onClose, top, left, bott
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [onClose]);
-    const menuContent = (_jsxs(_Fragment, { children: [_jsxs(MenuContainer, { ref: menuRef, "$display": isVisible ? 'block' : 'none', style: { top, left, bottom, right, width, height, position: 'fixed' }, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$minHeight": minHeight, "$minWidth": minWidth, "$padding": padding, children: [children, resizable && _jsx(ResizeHandle, { onMouseDown: (e) => {
+    const menuContent = (_jsxs(_Fragment, { children: [_jsxs(MenuContainer, { ref: menuRef, $display: isVisible ? 'block' : 'none', style: { top, left, bottom, right, width, height, position: 'fixed' }, $maxWidth: maxWidth, $maxHeight: maxHeight, $minHeight: minHeight, $minWidth: minWidth, $padding: padding, children: [children, resizable && _jsx(ResizeHandle, { onMouseDown: (e) => {
                             e.preventDefault();
                             document.body.style.pointerEvents = 'none';
                             isResizingRef.current = true;

package/lib/components/base/TMRightSidebar.js

@@ -32,7 +32,7 @@ const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = fal
             onItemClick && onItemClick(item.id, activeItems.has(item.id));
         }
     };
-    return (_jsx(SidebarContainer, { children: items.map((item, index) => (item.visible !== false && (_jsxs(StyledMenuItem, { "$disabled": item.disabled, style: { paddingTop: '10px', borderTop: item.beginGroup ? '2px solid #9c9c9c' : 'none' }, "$isHovered": hoveredItem === item.id, "$isSelected": item.isActive, onMouseEnter: () => setHoveredItem(item.id), onMouseLeave: () => setHoveredItem(null), onClick: () => !item.disabled && (item.onClick?.() ?? onClickHandler(item)), children: [_jsx(StyledAnimatedComponentScaleColor, { "$delay": `${(index * 150) + 650}ms`, children: item.icon }), _jsx("span", { children: item.visibleName })] }, item.id)))) }));
+    return (_jsx(SidebarContainer, { children: items.map((item, index) => (item.visible !== false && (_jsxs(StyledMenuItem, { $disabled: item.disabled, style: { paddingTop: '10px', borderTop: item.beginGroup ? '2px solid #9c9c9c' : 'none' }, $isHovered: hoveredItem === item.id, $isSelected: item.isActive, onMouseEnter: () => setHoveredItem(item.id), onMouseLeave: () => setHoveredItem(null), onClick: () => !item.disabled && (item.onClick?.() ?? onClickHandler(item)), children: [_jsx(StyledAnimatedComponentScaleColor, { $delay: `${(index * 150) + 650}ms`, children: item.icon }), _jsx("span", { children: item.visibleName })] }, item.id)))) }));
 };
 export default TMRightSidebar;
 // Styled Components

package/lib/components/base/TMShowAllOrMaxItemsButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { getListMaxItems, SDKUI_Localizator } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMButton from './TMButton';

package/lib/components/base/TMSpinner.js

@@ -158,12 +158,12 @@ const StyledCancelButton = styled.button `
     }
 `;
 const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false, onCancel, cancelText = 'Annulla' }) => {
-    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, "$hasCancel": !!onCancel, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
+    return (_jsx(StyledSpinnerContainer, { $backgroundColor: backgroundColor, children: _jsxs(StyledSpinnerWrapper, { $width: width, $flat: flat, $hasCancel: !!onCancel, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
                                 position: 'absolute',
                                 top: '50%',
                                 left: '50%',
                                 transform: 'translate(-54%, -54%)'
-                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
+                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { $fontSize: fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
 };
 class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText } = {

package/lib/components/base/TMTab.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import TabPanel, { Item } from "devextreme-react/tab-panel";
@@ -22,7 +22,7 @@ const renderTabItems = (tabItemProps, tabs, vil) => {
     return (_jsxs(StyledDivHorizontal, { style: { fontSize: '1rem', fontWeight: '600' }, children: [_jsx("span", { children: tabItemProps.title }), tabs.map((tab, index) => { return (_jsx("div", { style: { display: 'flex' }, children: tabItemProps.title == tab.title && _jsx(TMTabItemBadge, { vil: vil?.filter(o => tab.propsToBeValidated?.some((s) => o.PropertyName == s || o.PropertyScopes.includes(s))) ?? [] }) }, index)); })] }));
 };
 export const TMTabItemBadge = ({ vil }) => {
-    return (_jsxs(_Fragment, { children: [" ", vil.length > 0 && _jsx(StyledTabItemResultType, { "$backgroundColor": editorColorManager(vil), children: vil.length }), " "] }));
+    return (_jsxs(_Fragment, { children: [" ", vil.length > 0 && _jsx(StyledTabItemResultType, { $backgroundColor: editorColorManager(vil), children: vil.length }), " "] }));
 };
 const TMTabGroup = ({ children, fontSize, validationItems = [], onTabIndexChanged }) => {
     const [selectedIndex, setSelectedIndex] = useState(0);

package/lib/components/base/TMToggleButton.js

@@ -52,7 +52,7 @@ const TMToggleButton = ({ color = 'primary', value, label, elementStyle, fontSiz
         setCurrentColor(isModifiedWhen ? 'tertiary' : color);
     }, [isModifiedWhen, color]);
     const renderTooltip = () => { return (showTooltip && _jsx("div", { children: label })); };
-    return (_jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: _jsxs(StyledToggleButtonWrapper, { children: [_jsx(StyledToggleButtonContainer, { "$value": value, "$color": currentColor, style: elementStyle, onClick: onValueChanged, children: _jsx(StyledToggleButtonSwitch, { "$value": value, children: _jsx(StyledToggleValue, { children: value ? 'ON' : 'OFF' }) }) }), !showTooltip && label &&
-                    _jsx(StyledToggleButtonLabel, { "$color": isModifiedWhen ? Colors.tertiary : Colors.primary, children: label })] }) }));
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: _jsxs(StyledToggleButtonWrapper, { children: [_jsx(StyledToggleButtonContainer, { $value: value, $color: currentColor, style: elementStyle, onClick: onValueChanged, children: _jsx(StyledToggleButtonSwitch, { $value: value, children: _jsx(StyledToggleValue, { children: value ? 'ON' : 'OFF' }) }) }), !showTooltip && label &&
+                    _jsx(StyledToggleButtonLabel, { $color: isModifiedWhen ? Colors.tertiary : Colors.primary, children: label })] }) }));
 };
 export default TMToggleButton;

package/lib/components/base/TMToolbarCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import TMRightSidebar from './TMRightSidebar';
 import { IconArrowLeft, SDKUI_Localizator } from '../../helper';
@@ -46,8 +46,8 @@ const StyledSearchCardContent = styled.div `
   -webkit-user-select: none;
 `;
 const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
-    return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)
-                    onHeaderDoubleClick(); }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconArrowLeft, { color: TMColors.primaryColor }) }), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("p", { children: title }), Boolean(displayedItemsCount && displayedItemsCount > 0) && (_jsxs(_Fragment, { children: [_jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: displayedItemsCount }), Boolean(totalItems && totalItems > 0) && _jsx("span", { children: "\u00A0\u00A0/\u00A0" })] })), Boolean(totalItems && totalItems > 0) && _jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: totalItems })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx("i", { className: 'dx-icon-remove', style: { color: "white" } }), btnStyle: 'icon', onClick: () => onClose?.() })] })] }) }), _jsxs(StyledSearchCardContent, { "$height": showHeader ? "calc(100% - 35px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `${TMColors.backgroundColorHeader}12`, children: [_jsx("div", { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, children: children }), items.length > 0 &&
+    return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { $backgroundColor: backgroundColor, $color: color, onDoubleClick: () => { if (onHeaderDoubleClick)
+                    onHeaderDoubleClick(); }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconArrowLeft, { color: TMColors.primaryColor }) }), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("p", { children: title }), Boolean(displayedItemsCount && displayedItemsCount > 0) && (_jsxs(_Fragment, { children: [_jsx(StyledBadge, { $backgroundColor: '#679CE8', children: displayedItemsCount }), Boolean(totalItems && totalItems > 0) && _jsx("span", { children: "\u00A0\u00A0/\u00A0" })] })), Boolean(totalItems && totalItems > 0) && _jsx(StyledBadge, { $backgroundColor: '#679CE8', children: totalItems })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx("i", { className: 'dx-icon-remove', style: { color: "white" } }), btnStyle: 'icon', onClick: () => onClose?.() })] })] }) }), _jsxs(StyledSearchCardContent, { $height: showHeader ? "calc(100% - 35px)" : "100%", $padding: padding, $backgroundColor: backgroundColorContainer ?? `${TMColors.backgroundColorHeader}12`, children: [_jsx("div", { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, children: children }), items.length > 0 &&
                         _jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
 };
 export default TMToolbarCard;

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

@@ -9,6 +9,7 @@ interface ITMTooltipProps extends ITooltipOptions {
     hideAfterDelay?: boolean;
     parentStyle?: React.CSSProperties;
     childStyle?: React.CSSProperties;
+    allowContentInteraction?: boolean;
 }
-declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTooltip;

package/lib/components/base/TMTooltip.js

@@ -1,20 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'devextreme-react/tooltip';
 import { genUniqueId } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {
+/** Tempo per spostare il mouse dall'elemento al contenuto del tooltip, quando è interattivo */
+const HIDE_DELAY_MS = 400;
+const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction = false }) => {
     const [showTooltip, setShowTooltip] = useState(false);
-    const [id, setID] = useState('');
-    useEffect(() => { setID(genUniqueId()); }, [children]);
+    const [id] = useState(() => genUniqueId());
+    const hideTimerRef = useRef();
     useEffect(() => {
-        window.addEventListener('click', () => setShowTooltip(false));
-        return () => window.removeEventListener('click', () => setShowTooltip(false));
+        const hide = () => setShowTooltip(false);
+        window.addEventListener('click', hide);
+        return () => window.removeEventListener('click', hide);
     }, []);
+    useEffect(() => { return () => clearTimeout(hideTimerRef.current); }, []);
     const deviceType = useDeviceType();
-    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onTouchStart: () => { setShowTooltip(true); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
+    const cancelHide = () => clearTimeout(hideTimerRef.current);
+    const show = () => { cancelHide(); setShowTooltip(true); };
+    const hide = () => {
+        cancelHide();
+        if (!allowContentInteraction) {
+            setShowTooltip(false);
+            return;
+        }
+        hideTimerRef.current = setTimeout(() => setShowTooltip(false), HIDE_DELAY_MS);
+    };
+    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: show, onMouseLeave: hide, onTouchStart: show, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, onTouchEnd: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
-                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: content })] }));
+                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: allowContentInteraction
+                        ? _jsx("div", { style: { pointerEvents: 'all' }, onMouseEnter: cancelHide, onMouseLeave: hide, children: content })
+                        : content })] }));
 };
 export default TMTooltip;