@topconsultnpm/sdkui-react-beta 6.13.24 → 6.13.26

package/lib/components/base/TMListView.js

@@ -6,9 +6,9 @@ import TMContextMenu, { useTMContextMenu } from './TMContextMenu';
 import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow, IconUp, IconVisible } from '../../helper/TMIcons';
 import { TMSearchBar } from '../sidebar/TMHeader';
 import TMTooltip from './TMTooltip';
-import { SDKUI_Localizator } from '../../helper';
+import { getContrastColor, SDKUI_Localizator } from '../../helper';
 import { TMColors } from '../../utils/theme';
-const StyledListItem = styled.div ` width: 100%; height: max-content; border-bottom: 1px solid #e5e5e5; background-color: ${props => props.$isSelected ? props.$color ? `${props.$color}99` : '#00000030' : 'transparent'} ; color: ${props => props.$isSelected ? props.$color ? 'white' : '#000000' : '#000000'} ; &:hover{ background-color: ${props => props.$color ? props.$isSelected ? `${props.$color}99` : `${props.$color}40` : props.$isSelected ? '#00000030' : '#00000010'};} `;
+const StyledListItem = styled.div ` width: 100%; height: max-content; border-bottom: 1px solid #e5e5e5; background-color: ${props => props.$isSelected ? props.$color ? `${props.$color}99` : '#00000030' : 'transparent'} ; color: ${props => props.$isSelected ? props.$textColor : '#000000'} ; &:hover{ background-color: ${props => props.$color ? props.$isSelected ? `${props.$color}99` : `${props.$color}40` : props.$isSelected ? '#00000030' : '#00000010'};} `;
 const StyledListViewContainer = styled.div ` position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; `;
 const StyledSearchContainer = styled.div ` width: 100%; height: max-content; padding: 5px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
 const StyledListViewFooter = styled.div ` background-color: ${props => props.$bgColor}; width: 100%; height: 25px; padding: 5px 15px; border-top: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
@@ -257,7 +257,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
     }
     // map memo
     const memoList = useMemo(() => currentDataSource.map((data, index) => {
-        return (_jsx(StyledListItem, { "$isSelected": isSelected(data), "$color": customColor, 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) ? 'white' : '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 = () => {
@@ -282,9 +282,9 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
                                 customGroupingHeaders[index] ?
                                     _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center' }, children: customGroupingHeaders[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: customColor, color: 'white', 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: { 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: customColor, color: 'white', 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": customColor, 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 ? 'white' : '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 = () => {

package/lib/components/features/archive/TMArchive.js

@@ -10,7 +10,7 @@ import TMDcmtForm from '../documents/TMDcmtForm';
 import { StyledToppyTextContainer, StyledToppyText } from '../search/TMSearchQueryPanel';
 import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
-import TMToolbarCard from '../../base/TMToolbarCard';
+import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 const TMArchive = ({ inputTID }) => {
     const TIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [currentTID, setCurrentTID] = useState(0);
@@ -39,20 +39,28 @@ const TMArchive = ({ inputTID }) => {
     }, [deviceType, currentTID, showRecentsPanel]);
     let customSidebarItems = useMemo(() => {
         return ([
-            { icon: _jsx(IconTree, {}), id: 'trees', visibleName: 'Alberi', isActive: showTreesPanel, onClick: () => { setShowTreesPanel(!showTreesPanel); } },
-            { icon: _jsx(IconProgressReady, {}), id: 'recents', visibleName: 'Recenti', isActive: showRecentsPanel, onClick: () => { setShowRecentsPanel(!showRecentsPanel); } }
+            { icon: _jsx(IconTree, {}), selected: showTreesPanel, onClick: () => { setShowTreesPanel(!showTreesPanel); } },
+            { icon: _jsx(IconProgressReady, {}), selected: showRecentsPanel, onClick: () => { setShowRecentsPanel(!showRecentsPanel); } }
         ]);
     }, [showTreesPanel, showRecentsPanel]);
-    return (_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getPrimarySplitterStartValues(), children: [showTreesPanel ? _jsx(TMLayoutItem, { children: deviceType !== DeviceType.MOBILE && _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), layoutMode: LayoutModes.Ark, onSelectedTIDChanged: (tid) => { setSearchByTID(tid); } }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getSecondarySplitterStartValues(), children: [showRecentsPanel ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { title: 'Recenti', onClose: () => setShowRecentsPanel(false), totalItems: mruTIDs.length, children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, deviceType: deviceType, onSelectedTID: (tid) => setCurrentTID(tid), onDeletedTID: (tid) => {
-                                        let newMruTIDS = mruTIDs.slice();
-                                        let index = newMruTIDS.findIndex(o => o == tid);
-                                        if (index >= 0)
-                                            newMruTIDS.splice(index, 1);
-                                        SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                        setMruTIDs(newMruTIDS);
-                                    } }) }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: currentTID ?
-                                _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, layoutMode: LayoutModes.Ark, customRightSidebarItems: customSidebarItems, showPreview: deviceType !== DeviceType.MOBILE, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs) })
-                                :
-                                    _jsx(TMToolbarCard, { items: customSidebarItems, title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }) })] }) })] }));
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            justifyContent: 'space-between',
+            gap: SDKUI_Globals.userSettings.themeSettings.gutters,
+            width: '100%',
+            height: '100%',
+        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getPrimarySplitterStartValues(), children: [showTreesPanel ? _jsx(TMLayoutItem, { children: deviceType !== DeviceType.MOBILE && _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), layoutMode: LayoutModes.Ark, onSelectedTIDChanged: (tid) => { setSearchByTID(tid); } }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getSecondarySplitterStartValues(), children: [showRecentsPanel ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { title: 'Recenti', onClose: () => setShowRecentsPanel(false), totalItems: mruTIDs.length, children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, deviceType: deviceType, onSelectedTID: (tid) => setCurrentTID(tid), onDeletedTID: (tid) => {
+                                                    let newMruTIDS = mruTIDs.slice();
+                                                    let index = newMruTIDS.findIndex(o => o == tid);
+                                                    if (index >= 0)
+                                                        newMruTIDS.splice(index, 1);
+                                                    SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+                                                    setMruTIDs(newMruTIDS);
+                                                } }) }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: currentTID ?
+                                            _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, layoutMode: LayoutModes.Ark, customRightSidebarItems: customSidebarItems, showPreview: deviceType !== DeviceType.MOBILE, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs) })
+                                            :
+                                                _jsx(TMPanel, { title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }) })] }) })] }) }), !currentTID ? _jsx(TMCommandsPanel, { isMobile: isMobile, items: customSidebarItems }) : _jsx(_Fragment, {})] }));
 };
 export default TMArchive;

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

@@ -4,20 +4,19 @@ import { AccessLevels, DcmtTypeListCacheService, LayoutModes, MetadataDataDomain
 import { searchResultToMetadataValues, getSystemMetadata, calcIsModified, getListMaxItems, SDKUI_Localizator, SDKUI_Globals } from '../../../helper';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { DcmtOperationTypes, FormModes } from '../../../ts';
-import { TMColors } from '../../../utils/theme';
 import { StyledToolbarCardContainer, StyledFormButtonsContainer } from '../../base/Styled';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { TMSplitterLayout } from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
 import TMSpinner from '../../base/TMSpinner';
-import TMToolbarCard from '../../base/TMToolbarCard';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import TMDistinctValues from '../../choosers/TMDistinctValues';
 import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../editors/TMFormulaEditor';
 import { useMetadataEditableList } from '../../editors/TMMetadataEditor';
 import TMMetadataValues, { ShowCheckBoxesMode, AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 import { TMSaveFormButtonSave, TMSaveFormButtonUndo } from '../../forms/TMSaveForm';
+import TMPanel from '../../base/TMPanel';
 const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, onSavedCallbackAsync, onBack, onStatusChanged }) => {
     const [metadataValues, setMetadataValues] = useState([]);
     const [metadataValuesOrig, setMetadataValuesOrig] = useState([]);
@@ -113,7 +112,7 @@ const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.
     const totalItems = metadataValues.filter(o => o.mid && o.mid > 100).length;
     const metadataValuesSource = metadataValues.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValues.filter(o => o.mid && o.mid > 100).length : listMaxItems);
     const metadataValuesSourceOrig = metadataValuesOrig.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValuesOrig.filter(o => o.mid && o.mid > 100).length : listMaxItems);
-    return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { separatorSize: 5, separatorColor: 'transparent', showSeparator: showDistinctValuesPanel || showFormulaEditor, start: showDistinctValuesPanel || showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], direction: 'horizontal', children: [_jsx(TMToolbarCard, { title: `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, backgroundColorContainer: TMColors.default_background, onBack: deviceType === DeviceType.MOBILE ? onBack : undefined, onClose: deviceType !== DeviceType.MOBILE ? onBack : undefined, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+    return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? onBack : undefined, onClose: deviceType !== DeviceType.MOBILE ? onBack : undefined, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
                                     setMetadataValues((prevItems) => prevItems.map((item) => {
                                         const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
                                         return newItem ? { ...item, ...newItem } : item;
@@ -128,12 +127,12 @@ const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.
                                             break;
                                     }
                                 } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: errors.length <= 0 && isModified, formMode: FormModes.Update, errorsCount: errors.length, onSaveAsync: onSavedAsync }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: FormModes.Update, onUndo: onUndoHandler })] }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] })] }) }), showDistinctValuesPanel && focusedMetadataValue &&
-                    _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, separator: ', ', allowAppendMode: false, onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
+                    _jsx(TMDistinctValues, { isModal: true, tid: TID, mid: focusedMetadataValue?.mid, separator: ', ', allowAppendMode: false, onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
                             if (!e)
                                 return;
                             setMetadataValues((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue, isSelected: true } : item));
                         } }), showFormulaEditor && focusedMetadataValue &&
-                    _jsx(TMToolbarCard, { title: SDKUI_Localizator.FormulaEditorTitle + (focusedMetadataValue?.md?.nameLoc ? ` (${focusedMetadataValue?.md?.nameLoc})` : ''), onClose: () => setShowFormulaEditor(false), children: _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setShowFormulaEditor(false), onApplied: (newFormula) => {
+                    _jsx(TMPanel, { title: SDKUI_Localizator.FormulaEditorTitle + (focusedMetadataValue?.md?.nameLoc ? ` (${focusedMetadataValue?.md?.nameLoc})` : ''), onClose: () => setShowFormulaEditor(false), children: _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setShowFormulaEditor(false), onApplied: (newFormula) => {
                                 setMetadataValues((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
                                 setFocusedMetadataValue(prevState => ({
                                     ...prevState,

package/lib/components/features/documents/TMDcmtForm.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LayoutModes } from '@topconsultnpm/sdk-ts-beta';
 import { FormModes } from '../../../ts';
-import { ITMRightSidebarItem } from '../../base/TMRightSidebar';
+import { TMCommandItemProps } from '../../sidebar/TMCommandsPanel';
 interface ITMDcmtFormProps {
     TID?: number;
     DID?: number;
@@ -14,7 +14,7 @@ interface ITMDcmtFormProps {
     showPreview?: boolean;
     showBoard?: boolean;
     showSysMetadata?: boolean;
-    customRightSidebarItems?: ITMRightSidebarItem[];
+    customRightSidebarItems?: TMCommandItemProps[];
     showDcmtFormSidebar?: boolean;
     isExpertMode?: boolean;
     count?: number;

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

@@ -18,7 +18,6 @@ import TMButton from '../../base/TMButton';
 import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
-import TMToolbarCard from '../../base/TMToolbarCard';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import TMDistinctValues from '../../choosers/TMDistinctValues';
 import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../editors/TMFormulaEditor';
@@ -30,6 +29,8 @@ import TMMasterDetailDcmts from './TMMasterDetailDcmts';
 import TMDcmtBlog from './TMDcmtBlog';
 import { useInputAttachmentsDialog } from '../../../hooks/useInputDialog';
 import TMModal from '../../base/TMModal';
+import TMPanel from '../../base/TMPanel';
+import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 let abortControllerLocal = new AbortController();
 //#endregion
 const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreview, titleModal, isModal = false, widthModal = "100%", heightModal = "100%" }) => {
@@ -142,18 +143,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         }
         return _jsx(IconShow, {});
     }, [layoutMode, fileIsNotValid]);
-    const sideBarItems = useMemo(() => {
-        let fixedItems = [
-            { icon: fileManagerIcon, id: 'Preview', visibleName: (layoutMode === LayoutModes.Ark && fileIsNotValid) ? SDKUI_Localizator.RequiredField : layoutMode === LayoutModes.Ark ? SDKUI_Localizator.UploadFile : 'Anteprima', isActive: isOpenPreview, onClick: () => { setIsOpenPreview(!isOpenPreview); }, disabled: layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata },
-            { icon: _jsx(IconBoard, {}), id: 'Board', visibleName: 'Bacheca', disabled: layoutMode !== LayoutModes.Update, beginGroup: true, isActive: isOpenBoard, visible: layoutMode !== LayoutModes.Ark, onClick: () => { closeMiddlePanel(); setIsOpenBoard(!isOpenBoard); } },
-            { icon: _jsx(IconDcmtTypeSys, {}), id: 'SystemMetadata', visibleName: 'Metadati di sistema', disabled: layoutMode !== LayoutModes.Update, isActive: isOpenSysMetadata, visible: layoutMode !== LayoutModes.Ark, onClick: () => { closeMiddlePanel(); setIsOpenSysMetadata(!isOpenSysMetadata); } },
-            { icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), id: 'Master', beginGroup: true, visible: layoutMode !== LayoutModes.Ark && allowRelations && currentTIDHasMasterRelations, visibleName: SDKUI_Localizator.DcmtsMaster, disabled: layoutMode !== LayoutModes.Update || !DID, isActive: isOpenMaster, onClick: () => { setIsOpenMaster(!isOpenMaster); } },
-            { icon: _jsx(IconDetailDcmts, { fontSize: 20 }), id: 'Details', visibleName: SDKUI_Localizator.DcmtsDetail, disabled: layoutMode !== LayoutModes.Update || !DID, isActive: isOpenDetails, visible: layoutMode !== LayoutModes.Ark && allowRelations && currentTIDHasDetailRelations, onClick: () => { setIsOpenDetails(!isOpenDetails); } },
-        ];
-        return customRightSidebarItems.length === 0
-            ? fixedItems
-            : [...fixedItems.filter(item => item.id !== 'DistinctValues'), ...customRightSidebarItems, ...fixedItems.filter(item => item.id === 'DistinctValues')];
-    }, [customRightSidebarItems, layoutMode, isOpenPreview, focusedMetadataValue, fromDTD?.archiveConstraint]);
     const closeMiddlePanel = () => {
         setIsOpenBoard(false);
         setIsOpenSysMetadata(false);
@@ -449,50 +438,84 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         fd.tid = TID;
         return fd;
     };
+    const isPreviewDisabled = layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+    const isBoardDisabled = layoutMode !== LayoutModes.Update;
+    const isSysMetadataDisabled = layoutMode !== LayoutModes.Update;
+    const isDetailsDisabled = layoutMode !== LayoutModes.Update || !DID;
+    const isMasterDisabled = layoutMode !== LayoutModes.Update || !DID;
     const renderDcmtForm = () => {
-        return (_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { separatorSize: 5, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], direction: 'horizontal', children: [_jsx(TMLayoutItem, { children: _jsx(TMToolbarCard, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), items: showDcmtFormSidebar ? sideBarItems : undefined, onBack: isClosable ? undefined : handleClose, onClose: isClosable ? handleClose : undefined, children: metadataValuesSource.length > 0 && _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
-                                                setFormData((prevItems) => prevItems.map((item) => {
-                                                    const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
-                                                    return newItem ? { ...item, ...newItem } : item;
-                                                }));
-                                            }, onAdvancedMenuClick: (e) => {
-                                                switch (e.button) {
-                                                    case AdvancedMenuButtons.DistinctValues:
-                                                        setIsOpenDistinctValues(!isOpenDistinctValues);
-                                                        break;
-                                                    case AdvancedMenuButtons.FormulaEditor:
-                                                        setIsOpenFormulaEditor(!isOpenFormulaEditor);
-                                                        break;
-                                                }
-                                            } }), _jsxs(StyledFormButtonsContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), isInDcmtForm: true }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
-                                                                _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), showTooltip: false, caption: 'Archivia', advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), showTooltip: false, caption: 'Pulisci', advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: 'Annulla modifiche', advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) })] }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
-                            _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: 5, direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
-                                            ? _jsx(TMLayoutItem, { children: _jsx(TMToolbarCard, { padding: '0', showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), color: TMColors.primaryColor, backgroundColor: `${TMColors.primaryColor}25`, title: titleText(), toolbar: middlePanelToolbar, onClose: () => { closeMiddlePanel(); }, children: _jsx(StyledToolbarCardContainer, { children: _jsx(StyledSectionContainer, { children: _jsxs(StyledSidebarItemsContentContainer, { children: [isOpenBoard && layoutMode === LayoutModes.Update &&
-                                                                        _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
-                                                                        _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), isOpenFormulaEditor &&
-                                                                        _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
-                                                                                setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
-                                                                                setFocusedMetadataValue(prevState => ({
-                                                                                    ...prevState,
-                                                                                    isSelected: true,
-                                                                                    isEditable: true,
-                                                                                    value: FormulaHelper.addFormulaTag(newFormula.expression)
-                                                                                }));
-                                                                            } })] }) }) }) }) })
-                                            : _jsx(_Fragment, {}), isOpenPreview
-                                            ? _jsxs(TMLayoutItem, { children: [layoutMode === LayoutModes.Update ?
-                                                        _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev }) :
-                                                        _jsx(TMFileUploader, { onFileUpload: (file) => setDcmtFile(file), onClose: () => setIsOpenPreview(false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType }), " "] })
-                                            : _jsx(_Fragment, {})] }) }) : _jsx(_Fragment, {})] }), isOpenDistinctValues &&
-                    _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
-                            if (!e)
-                                return;
-                            setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
-                        } }), isOpenDetails &&
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: deviceType === DeviceType.MOBILE ? 'column' : 'row',
+                justifyContent: 'space-between',
+                gap: SDKUI_Globals.userSettings.themeSettings.gutters,
+                width: '100%',
+                height: '100%',
+            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: isClosable ? undefined : handleClose, onClose: isClosable ? handleClose : undefined, children: metadataValuesSource.length > 0 && _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                                                            setFormData((prevItems) => prevItems.map((item) => {
+                                                                const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                                                return newItem ? { ...item, ...newItem } : item;
+                                                            }));
+                                                        }, onAdvancedMenuClick: (e) => {
+                                                            switch (e.button) {
+                                                                case AdvancedMenuButtons.DistinctValues:
+                                                                    setIsOpenDistinctValues(!isOpenDistinctValues);
+                                                                    break;
+                                                                case AdvancedMenuButtons.FormulaEditor:
+                                                                    setIsOpenFormulaEditor(!isOpenFormulaEditor);
+                                                                    break;
+                                                            }
+                                                        } }), _jsxs(StyledFormButtonsContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), isInDcmtForm: true }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
+                                                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), showTooltip: false, caption: 'Archivia', advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), showTooltip: false, caption: 'Pulisci', advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: 'Annulla modifiche', advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) })] }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
+                                        _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
+                                                        ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), color: TMColors.primaryColor, backgroundColor: `${TMColors.primaryColor}25`, title: titleText(), toolbar: middlePanelToolbar, onClose: () => { closeMiddlePanel(); }, children: _jsx(StyledToolbarCardContainer, { children: _jsx(StyledSectionContainer, { children: _jsxs(StyledSidebarItemsContentContainer, { children: [isOpenBoard && layoutMode === LayoutModes.Update &&
+                                                                                    _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
+                                                                                    _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), isOpenFormulaEditor &&
+                                                                                    _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                                                                            setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                                                                            setFocusedMetadataValue(prevState => ({
+                                                                                                ...prevState,
+                                                                                                isSelected: true,
+                                                                                                isEditable: true,
+                                                                                                value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                                                                            }));
+                                                                                        } })] }) }) }) }) })
+                                                        : _jsx(_Fragment, {}), isOpenPreview
+                                                        ? _jsxs(TMLayoutItem, { children: [layoutMode === LayoutModes.Update ?
+                                                                    _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev }) :
+                                                                    _jsx(TMFileUploader, { onFileUpload: (file) => setDcmtFile(file), onClose: () => setIsOpenPreview(false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType }), " "] })
+                                                        : _jsx(_Fragment, {})] }) }) : _jsx(_Fragment, {})] }), isOpenDistinctValues &&
+                                _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
+                                        if (!e)
+                                            return;
+                                        setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
+                                    } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), showDcmtFormSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
+                        ...(layoutMode === LayoutModes.Ark ? [
+                            { icon: _jsx(IconRoundFileUpload, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                                    setIsOpenPreview(!isOpenPreview); } }
+                        ] : []),
+                        ...(layoutMode !== LayoutModes.Ark ? [
+                            { icon: _jsx(IconShow, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                                    setIsOpenPreview(!isOpenPreview); } },
+                            { icon: _jsx(IconBoard, { fontSize: 20 }), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
+                                    closeMiddlePanel();
+                                    setIsOpenBoard(!isOpenBoard);
+                                } } },
+                            { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
+                                    closeMiddlePanel();
+                                    setIsOpenSysMetadata(!isOpenSysMetadata);
+                                } } },
+                        ] : []),
+                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20 }), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
+                                    setIsOpenMaster(!isOpenMaster); } }] : []),
+                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
+                                    setIsOpenDetails(!isOpenDetails); } }] : []),
+                        ...customRightSidebarItems
+                    ] }), isOpenDetails &&
                     _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false) }) }), isOpenMaster &&
                     _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
                                 return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
-                            })] }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }));
+                            })] })] }));
     };
     const handleClose = () => {
         if (!isModified) {

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

@@ -9,13 +9,12 @@ import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import TMDropDownMenu from '../../base/TMDropDownMenu';
-import { TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
-import TMToolbarCard from '../../base/TMToolbarCard';
 import TMTooltip from '../../base/TMTooltip';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSaveForm';
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
+import TMPanel from '../../base/TMPanel';
 const TMDcmtPreview = ({ dcmtData, onClose, canNext, canPrev, onNext, onPrev }) => {
     const [dcmtBlob, setDcmtBlob] = useState(undefined);
     const [showPreview, setShowPreview] = useState(false);
@@ -86,12 +85,12 @@ const TMDcmtPreview = ({ dcmtData, onClose, canNext, canPrev, onNext, onPrev })
         }
         return title;
     };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMLayoutItem, { children: _jsx(TMToolbarCard, { padding: '0', color: TMColors.primaryColor, backgroundColor: `${TMColors.primaryColor}25`, title: titleHandler(), toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: [
-                                    { icon: _jsx(IconCloseCircle, {}), text: "Rimuovi elemento dalla cache", onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
-                                    { icon: _jsx(IconClear, {}), text: "Cancella la cache", onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
-                                ] }, "btn13") }), _jsx(StyledHeaderIcon, { onClick: onClose, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) })] }), children: error
-                    ? _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error })
-                    : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }) }));
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: [
+                                { icon: _jsx(IconCloseCircle, {}), text: "Rimuovi elemento dalla cache", onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
+                                { icon: _jsx(IconClear, {}), text: "Cancella la cache", onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
+                            ] }, "btn13") }), _jsx(StyledHeaderIcon, { onClick: onClose, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) })] }), children: error
+                ? _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error })
+                : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
 };
 export default TMDcmtPreview;
 export const TMFileViewer = ({ fileBlob }) => {

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

@@ -7,9 +7,9 @@ import { FileExtensionHandler } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import TMButton from '../../base/TMButton';
 import { DeviceType } from '../../base/TMDeviceProvider';
-import TMToolbarCard from '../../base/TMToolbarCard';
 import TMTooltip from '../../base/TMTooltip';
 import { TMFileViewer, StyledHeaderIcon } from './TMDcmtPreview';
+import TMPanel from '../../base/TMPanel';
 const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null }) => {
     const [dragOver, setDragOver] = useState(false);
     const [uploadedFile, setUploadedFile] = useState(defaultBlob);
@@ -73,7 +73,7 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] }) }) :
         _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: clearFile, icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile }) :
                     _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
-    return (_jsx(TMToolbarCard, { title: 'Caricamento File', onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? _jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }) : undefined, children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }) }));
+    return (_jsx(TMPanel, { title: 'Caricamento File', onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? _jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }) : undefined, children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }) }));
 };
 const UploadContainer = styled.div ` 
 position: relative;

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

@@ -5,7 +5,7 @@ import { ContextMenu } from 'devextreme-react';
 import { TMNothingToShow } from './TMDcmtPreview';
 import TMDcmtForm from './TMDcmtForm';
 import TMSearchResult from '../search/TMSearchResult';
-import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconPreview, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical } from '../../../helper';
+import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconPreview, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, SDKUI_Globals } from '../../../helper';
 import { hasDetailRelations } from '../../../helper/dcmtsHelper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -16,7 +16,6 @@ import { DeviceType } from '../../base/TMDeviceProvider';
 import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
-import TMToolbarCard from '../../base/TMToolbarCard';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import { TMUserIdViewer } from '../../choosers/TMUserChooser';
 import { TMResultManager } from '../../forms/TMResultDialog';
@@ -25,6 +24,8 @@ import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import { TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
 import TMTreeView from '../../base/TMTreeView';
 import TMDcmtIcon from './TMDcmtIcon';
+import TMPanel from '../../base/TMPanel';
+import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 let abortController = new AbortController();
 const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentDcmtIndicator = true, allowNavigation, canNext, canPrev, onNext, onPrev, onBack, appendMasterDcmts, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
@@ -287,14 +288,6 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
     const handleSelectedItemsChanged = useCallback((items) => {
         setSelectedItems(items);
     }, []);
-    const sideBarItems = [
-        { icon: _jsx(IconShow, {}), id: 'Preview', visibleName: 'Anteprima', isActive: showPreview, onClick: () => { setShowPreview(!showPreview); } },
-        { icon: _jsx(IconPreview, {}), id: 'DcmtForm', visibleName: 'Form', isActive: showDcmtForm, onClick: () => { setShowDcmtForm(!showDcmtForm); } },
-        { icon: _jsx(IconBoard, {}), id: 'Board', visibleName: 'Bacheca', beginGroup: true, isActive: showBoard, onClick: () => { setShowSysMetadata(false); setShowBoard(!showBoard); } },
-        { icon: _jsx(IconDcmtTypeSys, {}), id: 'SystemMetadata', visibleName: 'Metadati di sistema', isActive: showSysMetadata, onClick: () => { setShowBoard(false); setShowSysMetadata(!showSysMetadata); } },
-        { icon: _jsx(IconCheckFile, {}), id: 'allowZeroRelations', visibleName: 'Consenti dettagli con 0 documenti', beginGroup: true, isActive: showZeroDcmts, onClick: () => { setShowZeroDcmts(!showZeroDcmts); } },
-        { icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), id: 'Master', beginGroup: true, visible: isForMaster, disabled: !focusedItem?.isDcmt, visibleName: SDKUI_Localizator.DcmtsMaster, onClick: () => { appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did); } }
-    ];
     const commandsMenuItems = [
         {
             icon: svgToString(_jsx(IconMail, {})),
@@ -386,14 +379,29 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
     ];
     const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Selezione multipla', icon: _jsx(IconMultipleSelection, { fontSize: 16, color: allowMultipleSelection ? TMColors.tertiary : 'white' }), onClick: () => setAllowMultipleSelection(!allowMultipleSelection) }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
     const getTitle = () => isForMaster ? `${SDKUI_Localizator.DcmtsMaster} - ${dtdMaster?.nameLoc}` : SDKUI_Localizator.DcmtsDetail;
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: focusedItem != undefined, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: focusedItem && (showDcmtForm || showPreview || showBoard || showSysMetadata) ? deviceType != DeviceType.MOBILE ? ["40%", "60%"] : ["0%", "100%"] : ["100%", "0%"], children: [_jsx(TMToolbarCard, { title: getTitle(), toolbar: toolbar, items: sideBarItems, onBack: onBack, children: isLoading ? _jsx(_Fragment, {}) :
-                        data.length <= 0
-                            ?
-                                _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
-                            :
-                                _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) }), _jsx(TMLayoutItem, { children: focusedItem?.isDcmt ?
-                        _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE, showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showDcmtForm: showDcmtForm, onClose: () => { setShowDcmtForm(false); }, onClosePreview: () => { setShowPreview(false); } }) :
-                        _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreview: () => { setShowPreview(false); }, onTaskCreateRequest: onTaskCreateRequest }) })] }, "TMDetails-panel") }));
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            justifyContent: 'space-between',
+            gap: SDKUI_Globals.userSettings.themeSettings.gutters,
+            width: '100%',
+            height: '100%',
+        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: focusedItem != undefined, separatorActiveColor: 'transparent', min: ['0', '0'], start: focusedItem && (showDcmtForm || showPreview || showBoard || showSysMetadata) ? deviceType != DeviceType.MOBILE ? ["40%", "60%"] : ["0%", "100%"] : ["100%", "0%"], children: [_jsx(TMPanel, { title: getTitle(), toolbar: toolbar, onBack: onBack, children: isLoading ? _jsx(_Fragment, {}) :
+                                    data.length <= 0
+                                        ?
+                                            _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
+                                        :
+                                            _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) }), _jsx(TMLayoutItem, { children: focusedItem?.isDcmt ?
+                                    _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE, showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showDcmtForm: showDcmtForm, onClose: () => { setShowDcmtForm(false); }, onClosePreview: () => { setShowPreview(false); } }) :
+                                    _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreview: () => { setShowPreview(false); }, onTaskCreateRequest: onTaskCreateRequest }) })] }, "TMDetails-panel") }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
+                    { icon: _jsx(IconShow, { fontSize: 20 }), selected: showPreview, onClick: () => { setShowPreview(!showPreview); } },
+                    { icon: _jsx(IconPreview, { fontSize: 20 }), selected: showDcmtForm, onClick: () => { setShowDcmtForm(!showDcmtForm); } },
+                    { icon: _jsx(IconBoard, { fontSize: 20 }), selected: showBoard, onClick: () => { setShowSysMetadata(false); setShowBoard(!showBoard); } },
+                    { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: showSysMetadata, onClick: () => { setShowBoard(false); setShowSysMetadata(!showSysMetadata); } },
+                    { icon: _jsx(IconCheckFile, { fontSize: 20 }), selected: showZeroDcmts, onClick: () => { setShowZeroDcmts(!showZeroDcmts); } },
+                    { icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), disabled: !focusedItem?.isDcmt, onClick: () => { appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did); } }
+                ] })] }));
 };
 export default TMMasterDetailDcmts;
 function getMetadataKeys(obj) {

package/lib/components/features/search/TMSearch.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { SavedQueryCacheService, DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import TMSavedQuerySelector from './TMSavedQuerySelector';
@@ -6,12 +6,14 @@ import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
 import { getSysAllDcmtsSQD, IconProgressReady, IconSavedQuery, IconSearch, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { TMLayoutItem, TMSplitterLayout } from '../../base/TMLayout';
+import TMPanel from '../../base/TMPanel';
 import TMSearchResult from './TMSearchResult';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { StyledMultiViewPanel } from '../../base/Styled';
-import TMPanelManagerMatrix from '../../base/TMPanelManagerMatrix';
+import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 var TMSearchViews;
 (function (TMSearchViews) {
     TMSearchViews[TMSearchViews["None"] = 0] = "None";
@@ -27,158 +29,13 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
     const [searchResult, setSearchResult] = useState([]);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.None);
+    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
+    const [showTreesPanel, setShowTreesPanel] = useState(true);
+    const [showRecentsPanel, setShowRecentsPanel] = useState(true);
+    const [showSavedQueryPanel, setShowSavedQueryPanel] = useState(true);
     const [currentSQDMode, setCurrentSQDMode] = useState(1);
     const [lastQdSearched, setLastQdSearched] = useState();
     const deviceType = useDeviceType();
-    const panelMatrixMap = new Map([
-        [
-            "column-0",
-            {
-                width: "20%",
-                rows: [
-                    {
-                        id: 'treeSelector',
-                        height: '100%',
-                        width: '100%',
-                        content: (togglePanelVisibility) => _jsx(TMTreeSelector, { onClose: () => togglePanelVisibility({
-                                id: 'toolbar-item-treeSelector',
-                                icon: 'optionsgear',
-                                tooltipName: SDK_Localizator.Trees,
-                                panelManagerMatrixRowId: 'treeSelector',
-                            }), onSelectedTIDChanged: (tid) => {
-                                setCurrentTID(tid);
-                                if (tid && mruTIDs.includes(tid))
-                                    setCurrentMruTID(tid);
-                                else
-                                    setCurrentMruTID(0);
-                            } }),
-                        hidden: false
-                    }
-                ],
-            }
-        ],
-        [
-            "column-1",
-            {
-                width: "20%",
-                rows: [
-                    {
-                        id: 'recentsManager',
-                        height: '100%',
-                        width: '100%',
-                        content: (togglePanelVisibility) => _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
-                                setCurrentMruTID(tid);
-                                setCurrentTID(tid);
-                                togglePanelVisibility({
-                                    id: 'toolbar-item-searchQueryPanel',
-                                    icon: _jsx(IconSearch, {}),
-                                    tooltipName: SDKUI_Localizator.Search,
-                                    panelManagerMatrixRowId: 'searchQueryPanel',
-                                    // visible: deviceType === DeviceType.MOBILE
-                                });
-                            }, onDeletedTID: (tid) => {
-                                let newMruTIDS = mruTIDs.slice();
-                                let index = newMruTIDS.findIndex(o => o == tid);
-                                if (index >= 0)
-                                    newMruTIDS.splice(index, 1);
-                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                setMruTIDs(newMruTIDS);
-                            } }),
-                        hidden: false,
-                        panel: {
-                            title: "Scorciatoie",
-                            totalItems: mruTIDs.length
-                        }
-                    }
-                ],
-            }
-        ],
-        [
-            "column-2",
-            {
-                width: "40%",
-                rows: [
-                    {
-                        id: 'searchQueryPanel',
-                        height: '100%',
-                        width: '100%',
-                        content: _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onSearchCompleted: (searchResult, qd) => {
-                                setSearchResult(searchResult);
-                                if (searchResult.length <= 0)
-                                    return;
-                                setLastQdSearched(qd);
-                                setCurrentSearchView(TMSearchViews.Result);
-                                // Salvataggio ultimi 10 TIDs 
-                                let fromTID = searchResult?.[0].fromTID;
-                                let newMruTIDS = mruTIDs.slice();
-                                let index = newMruTIDS.findIndex(o => o == fromTID);
-                                if (index >= 0)
-                                    newMruTIDS.splice(index, 1);
-                                if (newMruTIDS.length >= 10)
-                                    newMruTIDS.splice(0, 1);
-                                newMruTIDS.push(fromTID);
-                                setMruTIDs(newMruTIDS);
-                                setCurrentMruTID(fromTID);
-                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                            }, onSqdSaved: async (newSqd) => {
-                                await loadDataSQDsAsync(true, newSqd.masterTID);
-                                await setSQDAsync(newSqd);
-                            } }),
-                        hidden: false
-                    }
-                ],
-            }
-        ],
-        [
-            "column-4",
-            {
-                width: "20%",
-                rows: [
-                    {
-                        id: 'savedQuery',
-                        height: '100%',
-                        width: '100%',
-                        content: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
-                                        // selectedId={currentSQD?.id}
-                                        onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }),
-                        hidden: false,
-                        panel: {
-                            title: SDK_Localizator.SavedQueries
-                        }
-                    }
-                ],
-            }
-        ]
-    ]);
-    const toolbar = {
-        items: [
-            {
-                id: 'toolbar-item-treeSelector',
-                icon: _jsx(IconTree, {}),
-                tooltipName: SDK_Localizator.Trees,
-                panelManagerMatrixRowId: 'treeSelector',
-            },
-            {
-                id: 'toolbar-item-recentsManager',
-                icon: _jsx(IconProgressReady, {}),
-                tooltipName: "Scorciatoie",
-                panelManagerMatrixRowId: 'recentsManager',
-            },
-            {
-                id: 'toolbar-item-searchQueryPanel',
-                icon: _jsx(IconSearch, {}),
-                tooltipName: SDKUI_Localizator.Search,
-                panelManagerMatrixRowId: 'searchQueryPanel',
-                visible: deviceType === DeviceType.MOBILE
-            },
-            {
-                id: 'toolbar-item-savedQuery',
-                icon: _jsx(IconSavedQuery, {}),
-                tooltipName: SDK_Localizator.SavedQueries,
-                panelManagerMatrixRowId: 'savedQuery',
-            }
-        ]
-    };
     useEffect(() => {
         setMruTIDs(SDKUI_Globals.userSettings.searchSettings.mruTIDs);
         loadDataSQDsAsync(false);
@@ -266,10 +123,82 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
         if (sqdToBeSet)
             await setSqdAsync?.(sqdToBeSet);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.None, children: _jsx(TMPanelManagerMatrix, { panelMatrixMap: panelMatrixMap, toolbar: toolbar, initialMobilePanelID: "recentsManager" }) }), _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Result, children: searchResult.length > 0 &&
-                    _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
-                            // setSearchResult([]);
-                            setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
-                        }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.None); } }) })] }));
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.None, style: {
+                    display: 'flex',
+                    flexDirection: isMobile ? 'column' : 'row',
+                    justifyContent: 'space-between',
+                    gap: SDKUI_Globals.userSettings.themeSettings.gutters,
+                    width: '100%',
+                    height: '100%',
+                }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, min: ['0', '0'], start: (deviceType === DeviceType.MOBILE) ? ['100%', '0%'] : showTreesPanel ? ['20%', '80%'] : ['0%', '100%'], children: [deviceType !== DeviceType.MOBILE &&
+                                    _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), onSelectedTIDChanged: (tid) => {
+                                            setCurrentTID(tid);
+                                            if (tid && mruTIDs.includes(tid))
+                                                setCurrentMruTID(tid);
+                                            else
+                                                setCurrentMruTID(0);
+                                        } }), _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showSavedQueryPanel && !showDistinctValuesPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE || showDistinctValuesPanel) ? ['100%', '0%'] : ((showSavedQueryPanel) ? ['70%', '30%'] : ['100%', '0%']), children: [_jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.DESKTOP ? (showRecentsPanel ? ['30%', '70%'] : ['0%', '100%']) : (currentTID ? ['0%', '100%'] : ['100%', '0%']), children: [_jsx(TMPanel, { title: "Scorciatoie", totalItems: mruTIDs.length, onClose: () => setShowRecentsPanel(false), children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
+                                                                let newMruTIDS = mruTIDs.slice();
+                                                                let index = newMruTIDS.findIndex(o => o == tid);
+                                                                if (index >= 0)
+                                                                    newMruTIDS.splice(index, 1);
+                                                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+                                                                setMruTIDs(newMruTIDS);
+                                                            } }) }), _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onSearchCompleted: (searchResult, qd) => {
+                                                            setSearchResult(searchResult);
+                                                            if (searchResult.length <= 0)
+                                                                return;
+                                                            setLastQdSearched(qd);
+                                                            setCurrentSearchView(TMSearchViews.Result);
+                                                            // Salvataggio ultimi 10 TIDs 
+                                                            let fromTID = searchResult?.[0].fromTID;
+                                                            let newMruTIDS = mruTIDs.slice();
+                                                            let index = newMruTIDS.findIndex(o => o == fromTID);
+                                                            if (index >= 0)
+                                                                newMruTIDS.splice(index, 1);
+                                                            if (newMruTIDS.length >= 10)
+                                                                newMruTIDS.splice(0, 1);
+                                                            newMruTIDS.push(fromTID);
+                                                            setMruTIDs(newMruTIDS);
+                                                            setCurrentMruTID(fromTID);
+                                                            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+                                                        }, onSqdSaved: async (newSqd) => {
+                                                            await loadDataSQDsAsync(true, newSqd.masterTID);
+                                                            await setSQDAsync(newSqd);
+                                                        } })] }) }), _jsx(StyledMultiViewPanel, { "$isVisible": showSavedQueryPanel, children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, onClose: () => setShowSavedQueryPanel(false), children: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
+                                                                // selectedId={currentSQD?.id}
+                                                                onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }) }) })] })] }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
+                            {
+                                icon: _jsx(IconTree, { fontSize: 20 }),
+                                selected: showTreesPanel,
+                                onClick: () => setShowTreesPanel(!showTreesPanel),
+                            },
+                            {
+                                icon: _jsx(IconProgressReady, { fontSize: 20 }),
+                                selected: showRecentsPanel,
+                                onClick: () => setShowRecentsPanel(!showRecentsPanel),
+                            },
+                            {
+                                icon: _jsx(IconSavedQuery, { fontSize: 20 }),
+                                selected: showSavedQueryPanel,
+                                onClick: () => setShowSavedQueryPanel(!showSavedQueryPanel),
+                            },
+                            ...(searchResult.length > 0 ? [{
+                                    icon: _jsx(IconSearch, { fontSize: 20 }),
+                                    disabled: searchResult.length <= 0,
+                                    onClick: () => {
+                                        if (searchResult.length > 0) {
+                                            setCurrentSearchView(currentSearchView === TMSearchViews.None
+                                                ? TMSearchViews.Result
+                                                : TMSearchViews.None);
+                                        }
+                                    },
+                                }] : []),
+                        ] })] }), searchResult.length > 0 &&
+                _jsx(TMSearchResult, { isVisible: currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
+                        // setSearchResult([]);
+                        setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
+                    }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.None); } })] }));
 };
 export default TMSearch;

package/lib/components/features/search/TMSearchResult.js

@@ -4,7 +4,7 @@ import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, M
 import styled from 'styled-components';
 import { getCommandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
 import { ContextMenu } from 'devextreme-react';
-import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconTag, IconDetails, IconCommand, IconDelete, IconRefresh, IconMenuVertical, IconDownload, IconSignature, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, IconArchive, IconActivityLog, IconStar, IconFreeSearch, IconChevronDown, searchResultToMetadataValues } from '../../../helper';
+import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconTag, IconDetails, IconCommand, IconDelete, IconRefresh, IconMenuVertical, IconDownload, IconSignature, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, IconArchive, IconActivityLog, IconStar, IconFreeSearch, IconChevronDown, searchResultToMetadataValues, SDKUI_Globals } from '../../../helper';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useInputAttachmentsDialog, useInputCvtFormatDialog } from '../../../hooks/useInputDialog';
 import { DcmtOperationTypes, FormModes, SearchResultContext, DownloadTypes } from '../../../ts';
@@ -17,7 +17,6 @@ import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { CustomListViewHeader } from '../../base/TMListView';
 import { TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
-import TMToolbarCard from '../../base/TMToolbarCard';
 import TMTooltip from '../../base/TMTooltip';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import { TMUserIdViewer } from '../../choosers/TMUserChooser';
@@ -34,6 +33,8 @@ import TMBatchUpdateForm from '../../features/documents/TMBatchUpdateForm';
 import TMDcmtForm from '../documents/TMDcmtForm';
 import TMDcmtBlog from '../documents/TMDcmtBlog';
 import TMDcmtIcon from '../documents/TMDcmtIcon';
+import TMPanel from '../../base/TMPanel';
+import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 //#endregion region Interfaces, Types and Enums
 //#region Styled Components
 const StyledContainer = styled.div ` overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;
@@ -82,7 +83,6 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
     const [currentDcmt, setCurrentDcmt] = useState();
     const [currentMetadataValues, setCurrentMetadataValues] = useState([]);
     const [dcmtFormLayoutMode, setDcmtFormLayoutMode] = useState(LayoutModes.Update);
-    // const [allowMultipleSelection, setAllowMultipleSelection] = useState<boolean>(false);
     const [isModifiedBatchUpdate, setIsModifiedBatchUpdate] = useState(false);
     const [confirmFormat, ConfirmFormatDialog] = useInputCvtFormatDialog();
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
@@ -140,14 +140,6 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
     useEffect(() => { setIsOpenSysMetadata(showSysMetadata); }, [showSysMetadata]);
     useEffect(() => { setIsOpenDcmtForm(showDcmtForm); }, [showDcmtForm]);
     useEffect(() => { setIsOpenPreview(showPreview); }, [showPreview]);
-    const sideBarItems = [
-        { icon: _jsx(IconShow, {}), id: 'Preview', visibleName: 'Anteprima', isActive: isOpenPreview, onClick: () => { setIsOpenPreview(!isOpenPreview); }, disabled: isOpenBatchUpdate || fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata },
-        { icon: _jsx(IconBoard, {}), id: 'Board', visibleName: 'Bacheca', beginGroup: true, isActive: isOpenBoard, disabled: isOpenBatchUpdate, onClick: () => { closeMiddlePanel(); setIsOpenBoard(!isOpenBoard); } },
-        { icon: _jsx(IconDcmtTypeSys, {}), id: 'SystemMetadata', visibleName: 'Metadati di sistema', isActive: isOpenSysMetadata, disabled: isOpenBatchUpdate, onClick: () => { closeMiddlePanel(); setIsOpenSysMetadata(!isOpenSysMetadata); } },
-        { icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), id: 'Master', beginGroup: true, visible: currentTIDHasMasterRelations, visibleName: SDKUI_Localizator.DcmtsMaster, disabled: isOpenBatchUpdate || !focusedItem?.DID, isActive: isOpenMaster, onClick: () => { setIsOpenMaster(!isOpenMaster); } },
-        { icon: _jsx(IconDetailDcmts, { fontSize: 20 }), id: 'Details', visibleName: SDKUI_Localizator.DcmtsDetail, disabled: isOpenBatchUpdate || (!focusedItem?.DID && selectedItems.length <= 0), isActive: isOpenDetails, visible: currentTIDHasDetailRelations, onClick: () => { setIsOpenDetails(!isOpenDetails); } },
-        // { icon: <IconBatchUpdate fontSize={18} />, id: 'BatchUpdate', visibleName: "Modifica multipla", disabled: selectedItems.length <= 0, isActive: isOpenBatchUpdate, onClick: () => { setIsOpenBatchUpdate(!isOpenBatchUpdate) } }
-    ];
     const openFormHandler = (layoutMode) => { setIsOpenDcmtForm(true); setDcmtFormLayoutMode(layoutMode); };
     const openTaskFormHandler = (value) => {
         if (selectedItems.length > 1)
@@ -430,37 +422,67 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
     };
     if (!searchResults || searchResults.length <= 0)
         return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound })] });
-    return (_jsx(StyledMultiViewPanel, { "$isVisible": isVisible, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: [_jsxs(TMSplitterLayout, { separatorSize: 5, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) && deviceType !== DeviceType.MOBILE, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], direction: 'horizontal', children: [_jsx(TMLayoutItem, { children: _jsxs(TMToolbarCard, { toolbar: _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
-                                            _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] }), onBack: !isClosable && allowBackButton() ? onBack : undefined, onClose: isClosable && allowBackButton() ? onBack : undefined, items: showSearchResultSidebar ? sideBarItems : undefined, title: getTitleHeader(), showHeader: showToolbarHeader, children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['25%', '75%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
-                                                        _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, onSelectionChanged: onSearchResultSelectionChanged }) })
-                                                        :
-                                                            _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid
-                                                            // allowMultipleSelection={allowMultipleSelection}
-                                                            , { 
-                                                                // allowMultipleSelection={allowMultipleSelection}
-                                                                inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
-                                                                _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] }) }), isOpenBatchUpdate ?
-                            _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMBatchUpdateForm, { inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => setIsOpenBatchUpdate(false), onSavedCallbackAsync: async () => {
-                                        setIsOpenBatchUpdate(false);
-                                        setIsModifiedBatchUpdate(false);
-                                        await refreshSelectionDataRowsAsync();
-                                    }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }) })
-                            :
-                                isOpenPreview || isOpenMiddlePanel()
-                                    ? _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: 5, direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
-                                                    ? _jsx(TMLayoutItem, { children: _jsx(TMToolbarCard, { padding: '0', 
-                                                            // color={TMColors.primaryColor}
-                                                            // backgroundColor={`${TMColors.primaryColor}25`}
-                                                            title: titleText(), toolbar: middlePanelToolbar, onClose: () => closeMiddlePanel(), children: (!focusedItem?.DID)
-                                                                ?
-                                                                    _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.', secondText: notAvalableMsg, icon: notAvalableIcon })
+    const isPreviewDisabled = isOpenBatchUpdate || fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+    const isBoardDisabled = isOpenBatchUpdate;
+    const isSysMetadataDisabled = isOpenBatchUpdate || !focusedItem?.DID;
+    const isDetailsDisabled = isOpenBatchUpdate || !focusedItem?.DID;
+    const isMasterDisabled = isOpenBatchUpdate || (!focusedItem?.DID && selectedItems.length <= 0);
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsx(StyledMultiViewPanel, { "$isVisible": isVisible, children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: isMobile ? 'column' : 'row',
+                justifyContent: 'space-between',
+                gap: SDKUI_Globals.userSettings.themeSettings.gutters,
+                width: '100%',
+                height: '100%',
+            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) && deviceType !== DeviceType.MOBILE, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsxs(TMPanel, { toolbar: _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
+                                                    _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] }), onBack: !isClosable && allowBackButton() ? onBack : undefined, onClose: isClosable && allowBackButton() ? onBack : undefined, 
+                                        // items={showSearchResultSidebar ? sideBarItems : undefined}
+                                        title: getTitleHeader(), showHeader: showToolbarHeader, children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['25%', '75%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
+                                                                _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, onSelectionChanged: onSearchResultSelectionChanged }) })
                                                                 :
-                                                                    _jsxs(StyledContainer, { children: [isOpenBoard && _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID }), isOpenSysMetadata &&
-                                                                                _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: !isOpenDistinctValues, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] })] }) }) })
-                                                    : _jsx(_Fragment, {}), isOpenPreview
-                                                    ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev') }) })
-                                                    : _jsx(_Fragment, {})] }) })
-                                    : _jsx(_Fragment, {})] }), isOpenDetails &&
+                                                                    _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid
+                                                                    // allowMultipleSelection={allowMultipleSelection}
+                                                                    , { 
+                                                                        // allowMultipleSelection={allowMultipleSelection}
+                                                                        inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
+                                                                        _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] }) }), isOpenBatchUpdate ?
+                                    _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMBatchUpdateForm, { inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => setIsOpenBatchUpdate(false), onSavedCallbackAsync: async () => {
+                                                setIsOpenBatchUpdate(false);
+                                                setIsModifiedBatchUpdate(false);
+                                                await refreshSelectionDataRowsAsync();
+                                            }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }) })
+                                    :
+                                        isOpenPreview || isOpenMiddlePanel()
+                                            ? _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], children: [isOpenMiddlePanel()
+                                                            ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { padding: '0', 
+                                                                    // color={TMColors.primaryColor}
+                                                                    // backgroundColor={`${TMColors.primaryColor}25`}
+                                                                    title: titleText(), toolbar: middlePanelToolbar, onClose: () => closeMiddlePanel(), children: (!focusedItem?.DID)
+                                                                        ?
+                                                                            _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.', secondText: notAvalableMsg, icon: notAvalableIcon })
+                                                                        :
+                                                                            _jsxs(StyledContainer, { children: [isOpenBoard && _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID }), isOpenSysMetadata &&
+                                                                                        _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: !isOpenDistinctValues, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] })] }) }) })
+                                                            : _jsx(_Fragment, {}), isOpenPreview
+                                                            ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev') }) })
+                                                            : _jsx(_Fragment, {})] }) })
+                                            : _jsx(_Fragment, {})] }) }) }), showSearchResultSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
+                        { icon: _jsx(IconShow, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                                setIsOpenPreview(!isOpenPreview); } },
+                        { icon: _jsx(IconBoard, { fontSize: 20 }), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
+                                closeMiddlePanel();
+                                setIsOpenBoard(!isOpenBoard);
+                            } } },
+                        { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
+                                closeMiddlePanel();
+                                setIsOpenSysMetadata(!isOpenSysMetadata);
+                            } } },
+                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20 }), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
+                                    setIsOpenMaster(!isOpenMaster); } }] : []),
+                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
+                                    setIsOpenDetails(!isOpenDetails); } }] : []),
+                    ] }), isOpenDetails &&
                     _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), isOpenMaster &&
                     _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
                                 return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));

package/lib/components/grids/TMRecentsManager.js

@@ -30,7 +30,7 @@ const StyledRecentTidItem = styled.div `
 const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
                                     color: TMColors.primaryColor,
                                     fontSize: '1rem',
                                     fontWeight: 600,

package/lib/components/sidebar/TMCommandsPanel.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isMobile?: boolean;
+}>> & string;
+export interface TMCommandItemProps {
+    icon: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface TMCommandsPanelProps {
+    isMobile?: boolean;
+    items: TMCommandItemProps[];
+}
+declare const TMCommandsPanel: React.FC<TMCommandsPanelProps>;
+export default TMCommandsPanel;

package/lib/components/sidebar/TMCommandsPanel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+export const StyledCommandsPanel = styled.div `
+    display: flex;
+    flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
+    width: ${({ $isMobile }) => ($isMobile ? '100%' : '40px')};
+    height: ${({ $isMobile }) => ($isMobile ? '40px' : 'max-content')};
+    background: transparent linear-gradient(90deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box;
+    border-radius: ${({ $isMobile }) => ($isMobile ? '10px 10px 0 0' : '10px 0px 0px 10px')};
+    padding: 10px;
+    gap: 10px;
+`;
+const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
+            background: iconProps.selected ? 'white' : 'transparent',
+            borderRadius: '6px',
+            color: iconProps.selected ? '#E03A8B' : 'white',
+            opacity: iconProps.disabled ? 0.4 : 1,
+            cursor: iconProps.disabled ? 'not-allowed' : 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '24px',
+            width: '24px',
+        }, onClick: iconProps.disabled ? undefined : iconProps.onClick, children: iconProps.icon }, idx))) }));
+export default TMCommandsPanel;

package/lib/helper/helpers.d.ts

@@ -40,3 +40,7 @@ export declare function isPositiveNumber(val: unknown): val is number;
 export declare function sleep(ms: number): Promise<void>;
 export declare const dialogConfirmOperation: (title: string, msg: string, operationAsync: () => Promise<void>) => void;
 export declare function getExceptionMessage(ex: any): string;
+export declare function getContrastColor(inputColor: string): {
+    bgColor: string;
+    textColor: string;
+};

package/lib/helper/helpers.js

@@ -664,3 +664,39 @@ export function getExceptionMessage(ex) {
     let msg = ex.isApiException ? ex.response.title : ex.message;
     return msg ?? ex.toString();
 }
+export function getContrastColor(inputColor) {
+    let hex = inputColor;
+    if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(inputColor)) {
+        const temp = document.createElement('div');
+        temp.style.color = inputColor;
+        document.body.appendChild(temp);
+        const rgb = getComputedStyle(temp).color;
+        document.body.removeChild(temp);
+        const regex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
+        const match = regex.exec(rgb);
+        if (match) {
+            const r = parseInt(match[1]).toString(16).padStart(2, '0');
+            const g = parseInt(match[2]).toString(16).padStart(2, '0');
+            const b = parseInt(match[3]).toString(16).padStart(2, '0');
+            hex = `#${r}${g}${b}`;
+        }
+        else {
+            hex = '#000000';
+        }
+    }
+    const color = hex.replace('#', '');
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    if (inputColor === 'transparent' || inputColor === 'rgba(255, 255, 255, 0)' || inputColor === 'none' || inputColor === 'white' || inputColor === '#ffffff' || inputColor === '#fff') {
+        return {
+            bgColor: '#aeaeae',
+            textColor: '#393939'
+        };
+    }
+    return {
+        bgColor: hex,
+        textColor: luminance > 0.6 ? '#000000' : '#FFFFFF'
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.24",
+    "version": "6.13.26",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "^6.13.4",
+        "@topconsultnpm/sdk-ts-beta": "6.13.4",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",