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

package/lib/components/base/TMListView.js

@@ -265,7 +265,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
     }
     // map memo
     const memoList = useMemo(() => currentDataSource.map((data, index) => {
-        return (_jsx(StyledListItem, { "$isSelected": isSelected(data), "$color": getContrastColor(customColor).bgColor, "$textColor": getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: isSelected(data) ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
+        return (_jsx(StyledListItem, { $isSelected: isSelected(data), $color: getContrastColor(customColor).bgColor, $textColor: getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: isSelected(data) ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
     }), [currentDataSource, selectedItem, localShowId, customColor]);
     const groupedMemoList = useMemo(() => groupKeys.map((key, index) => {
         const groupingText = () => {
@@ -292,7 +292,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
                                     :
                                         _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] })
                                 :
-                                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": getContrastColor(customColor).bgColor, "$textColor": getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
+                                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { $isSelected: data === selectedItem, $color: getContrastColor(customColor).bgColor, $textColor: getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
     }), [currentDataSource, selectedItem, localShowId, customColor, openList, grouping, customGroupingHeaders]);
     // List height
     const listHeight = () => {
@@ -376,7 +376,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
                     grouping.length === 0 ? memoList : groupedMemoList :
                     searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
                         _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data" }) }), (searchValue.length > 0 || showOrderMenu) &&
-                _jsxs(StyledListViewFooter, { "$bgColor": `${customColor}20`, children: [showOrderMenu &&
+                _jsxs(StyledListViewFooter, { $bgColor: `${customColor}20`, children: [showOrderMenu &&
                             _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); setOrderMenuVisible(!orderMenuVisible); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
 };
 export default TMListView;

package/lib/components/base/TMModal.js

@@ -144,6 +144,6 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     return (_jsx(_Fragment, { children: isModal ? (_jsxs(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : position, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: [showHeader && titleActions && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', render: () => _jsx(_Fragment, { children: titleActions }) })), showHeader && expandable && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', widget: 'dxButton', options: {
                         icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
                         onClick: () => setIsFullScreen(!isFullScreen)
-                    } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, 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 })] })) }));
+                    } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, 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/base/TMPanel.js

@@ -3,7 +3,7 @@ import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from '
 import styled, { css, keyframes } from 'styled-components';
 import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconRefresh, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
-import { LoadIndicator } from 'devextreme-react/load-indicator';
+import { SpinnerGraphic } from './TMSpinner';
 import { TMExceptionBoxManager } from './TMPopUp';
 import { Gutters, TMColors } from '../../utils/theme';
 const StyledBackButton = styled.button `
@@ -292,15 +292,15 @@ onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Bac
             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',
@@ -313,7 +313,7 @@ onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Bac
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     flexShrink: 0
-                                }, 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)
+                                }, 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})`
@@ -323,9 +323,9 @@ onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Bac
                                     alignItems: 'center',
                                     gap: '5px',
                                     flexShrink: 0
-                                }, 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
+                                }, 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?.(); } })] })] }) }), _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 })] })] })] }));
+                                            : _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

@@ -212,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();
@@ -374,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;