@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t3

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 { SpinnerGraphic } from './TMSpinner';
+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(SpinnerGraphic, {}), _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.d.ts

@@ -8,10 +8,11 @@ interface ITMSpinner {
     onCancel?: () => void;
     cancelText?: string;
 }
+declare const SpinnerGraphic: () => React.JSX.Element;
 declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => React.JSX.Element;
 declare class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;
 }
-export { Spinner };
+export { Spinner, SpinnerGraphic };
 export default TMSpinner;

package/lib/components/base/TMSpinner.js

@@ -157,13 +157,15 @@ const StyledCancelButton = styled.button `
         transform: scale(0.98);
     }
 `;
+// Grafica dello spinner (logo + 8 pallini animati), riusabile anche nei loader inline
+const SpinnerGraphic = () => (_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", {})] })] }));
 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: {
-                                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 }))] }) }));
+    return (_jsx(StyledSpinnerContainer, { $backgroundColor: backgroundColor, children: _jsxs(StyledSpinnerWrapper, { $width: width, $flat: flat, $hasCancel: !!onCancel, children: [_jsx(SpinnerGraphic, {}), _jsx(StyledSpinnerDescription, { $fontSize: fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
 };
 class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText } = {
@@ -183,5 +185,5 @@ class TMSpinner {
         container?.remove();
     }
 }
-export { Spinner };
+export { Spinner, SpinnerGraphic };
 export default TMSpinner;

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
+/** Stile della barra, sempre nei colori del modulo: 'module' con la striscia, 'card' senza fondo, 'moduleFilled' col tab pieno. */
+export type TMTabControlVariant = 'card' | 'module' | 'moduleFilled';
+/** Effetto del contenuto quando si cambia tab: 'fade' e il default, 'none' toglie l'animazione. */
+export type TMTabControlAnimation = 'none' | 'fade' | 'slide' | 'zoom';
+export interface TMTabPanelProps {
+    /** Identificativo univoco del tab. */
+    id: string;
+    /** Titolo mostrato nella barra: stringa se vuoi poterlo rinominare. */
+    label: React.ReactNode;
+    /** Numero nel badge accanto al titolo: nascosto se 0 o undefined. */
+    badge?: number;
+    /** Colore del badge, default rosso. */
+    badgeColor?: string;
+    /** Tab non cliccabile. */
+    disabled?: boolean;
+    /** Se false il tab non viene renderizzato: comodo per tab condizionali. Default true. */
+    visible?: boolean;
+    /** Se false nasconde la 'x' e la voce Chiudi su questo tab. Default true. */
+    closable?: boolean;
+    /** Se false disabilita la rinomina su questo tab. Default true. */
+    renamable?: boolean;
+    /** Se false il tab non si trascina e non accetta il rilascio di altri: resta al suo posto. Default true. */
+    movable?: boolean;
+    children?: React.ReactNode;
+}
+/** Contenitore dichiarativo di un tab: figlio diretto di TMTabControl, non renderizza nulla di suo. */
+export declare const TMTabPanel: React.FC<TMTabPanelProps>;
+export interface TMTabControlProps {
+    /** Id del tab attivo in modalita controllata. */
+    selectedId?: string;
+    /** Tab iniziale in modalita non controllata. Default: primo tab visibile. */
+    defaultSelectedId?: string;
+    /** Notifica il cambio tab in entrambe le modalita. */
+    onSelectedIdChange?: (id: string) => void;
+    /** Se true con un solo tab la barra non viene mostrata: resta solo il contenuto. Default false. */
+    hideBarWhenSingle?: boolean;
+    /** Se valorizzata mostra la 'x' sui tab e notifica la richiesta di chiusura. */
+    onTabClose?: (id: string) => void;
+    /** Se true anche l'ultimo tab rimasto e chiudibile, lasciando il controllo senza tab. Default false. */
+    closableWhenSingle?: boolean;
+    /** Se valorizzata abilita la rinomina del titolo. */
+    onTabRename?: (id: string, label: string) => void;
+    /** Se valorizzata abilita lo spostamento con trascinamento: sposta draggedId nella posizione di targetId. */
+    onTabReorder?: (draggedId: string, targetId: string) => void;
+    /** Se valorizzata il menu contestuale del tab mostra anche la voce per aggiungere un tab. */
+    onTabAdd?: () => void;
+    /** Voci del chiamante nel menu contestuale del tab: precedono quelle del controllo, che non ripete una voce con lo stesso testo (es. Chiudi). */
+    tabMenuItems?: (id: string) => TMContextMenuItemProps[];
+    /** Testo della voce di menu per l'aggiunta. */
+    addCaption?: string;
+    /** Testo della voce di menu per la rinomina. */
+    renameCaption?: string;
+    /** Testo della voce di menu per la chiusura. */
+    closeCaption?: string;
+    /** Testo della voce di menu per la chiusura degli altri tab. */
+    closeOtherCaption?: string;
+    /** Stile della barra: 'module' (default) con la striscia, 'card' senza fondo o 'moduleFilled' col tab pieno. */
+    variant?: TMTabControlVariant;
+    /** Colore del titolo del tab attivo: scavalca quello della variante. */
+    textColor?: string;
+    /** Colore del titolo dei tab inattivi: scavalca quello della variante. */
+    idleTextColor?: string;
+    /** Effetto del contenuto al cambio tab: 'fade' (default), 'slide' nel verso dello spostamento, 'zoom' o 'none'. */
+    contentAnimation?: TMTabControlAnimation;
+    /** Durata dell'effetto in millisecondi. Default 280. */
+    animationDuration?: number;
+    /** Se true su touch si cambia tab trascinando il contenuto di lato. Default false. */
+    swipeEnabled?: boolean;
+    /** Stile del contenitore del contenuto, es. altezza e overflow. */
+    contentStyle?: React.CSSProperties;
+    /** Stile del contenitore esterno. */
+    style?: React.CSSProperties;
+    /** Contenuto del chiamante in coda alla barra, a destra dei tab: es. i pulsanti di azione della pagina.
+        Fa parte della barra, quindi con hideBarWhenSingle e un solo tab non viene mostrato. */
+    toolbar?: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const TMTabControl: React.FC<TMTabControlProps>;
+export default TMTabControl;
+export interface TMTabDescriptor {
+    id: string;
+    label: string;
+}
+export interface TMTabsController {
+    items: TMTabDescriptor[];
+    activeId: string;
+    setActiveId: (id: string) => void;
+    /** Aggiunge un tab e lo attiva. Torna l'id creato. */
+    add: (label?: string) => string;
+    /** Chiude un tab: se era attivo passa al precedente. */
+    close: (id: string) => void;
+    rename: (id: string, label: string) => void;
+    /** Sposta il tab trascinato nella posizione di quello di arrivo. */
+    move: (draggedId: string, targetId: string) => void;
+    /** TMTabControl: funzionalità selezione, chiusura, rinomina, spostamento e aggiunta. */
+    controlProps: Pick<TMTabControlProps, 'selectedId' | 'onSelectedIdChange' | 'onTabClose' | 'onTabRename' | 'onTabReorder' | 'onTabAdd'>;
+}
+export interface TMTabsOptions {
+    /** Titolo del primo tab e base per quelli aggiunti ("Ricerca", poi "Ricerca 2", "Ricerca 3"...). */
+    label: string;
+    /** Titolo personalizzato per i tab aggiunti, in alternativa alla numerazione automatica. */
+    newLabel?: (index: number) => string;
+}
+export declare const useTMTabs: ({ label, newLabel }: TMTabsOptions) => TMTabsController;